Question

我正在寻找一种方法来对齐多个元素（跨距，输入和按钮），这样即使它们的大小不同，它们的垂直中点也在同一条水平线上： Alignment

如何在CSS中实现这一目标？这是要播放的HTML文件：

<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

设置px中最高元素的主div line-height:高度，然后设置vertical-align: middle。您可能还必须在子元素上设置display:inline或display:inline-block。

这应该有效。

Answer 2

正如其他人（David Nguyen和thirtydot）所说，添加vertical-align:middle;将完成你在之后的效果，只要你摆脱代码中当前的浮动。添加display:inline-block;可以让您更好地控制维度，我不知道您是否在计划，但我肯定会将您的<span class="label">换成实际<label>标记

Answer 3

您的范围，输入和按钮需要属性： vertical-align:middle;display:inline

跨距，输入和按钮的CSS对齐

3 个答案: