Question

I m looking for a way to align a number of elements (spans, inputs, and buttons) such that despite their differing sizes, their vertical mid point is on the same horizontal line: Alignment

我如何在安保部做到这一点? 可在以下网址查阅:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
    <style>
.content { font-size: 18px; border: 1px dotted blue;  }
.content input, .content button { font-size: 40px; float: left; }
.label { border: 1px dotted red; float: left; }
.clear { clear: both; }
    </style>
</head>

<body>
<div class="content">
    <span class="label">Label: </span><input type="text">
    <span class="label">More text: </span><input type="text">
    <button type="submit">Submit Me</button>
    <div class="clear"></div>
</div>

</body>

</html>

Answer 1

正如其他人(David Nguyen和30dot)所说的那样,加上vertical-align:middle; 只要你拿走目前载于你的代码中的浮标,就将取得你在之后的效应。添加<条码>:直线24小时;将允许你更好地控制各个层面,我不知道你是否正在计划,但我不知道我是否明确放弃了你的<条码>和代号;span=“label”>用于实际<条码>和代号>;label>标签。

Answer 2

Set the main div s line-height: height of tallest element in px, then set vertical-align: middle. You may have to set display:inline or display:inline-block on the subelements as well.

这应当奏效。

Answer 3

Your span, input and button need the property: vertical-align:middle;display:inline

友情链接