跨度、输入和按钮的 CSS 对齐方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5985873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS alignment of spans, inputs, and buttons
提问by Parand
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:
我正在寻找一种方法来对齐多个元素（跨度、输入和按钮），以便尽管它们的大小不同，但它们的垂直中点位于同一水平线上：
How do I achieve this in CSS? Here's the HTML file to play with:
我如何在 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>
回答by SickHippie
Set the main div's line-height:height of tallest element in px, then set vertical-align: middle. You may have to set display:inlineor display:inline-blockon the subelements as well.
以 px 为单位设置 main最高元素div的line-height:高度，然后设置vertical-align: middle. 您可能还必须在子元素上设置display:inline或display:inline-block。
That should work.
那应该工作。
回答by iamnotoriginal
As others (David Nguyen and thirtydot) have said, adding vertical-align:middle;will accomplish the effect you're after so long asyou get rid of the floats that are currently in your code. Adding display:inline-block;will let you have better control over the dimensions, and I don't know if you were planning on it, but I'd definitely swap out your <span class="label">for actual <label>tags.
正如其他人（David Nguyen 和三十点）所说，添加vertical-align:middle;将实现您想要的效果，只要您摆脱当前代码中的浮点数即可。添加display:inline-block;将使您更好地控制尺寸，我不知道您是否打算这样做，但我肯定会将您<span class="label">的<label>标签换成实际标签。
回答by David Nguyen
Your span, input and button need the property:
vertical-align:middle;display:inline
您的跨度、输入和按钮需要以下属性：
vertical-align:middle;display:inline
