跨距,输入和按钮的CSS对齐
我正在寻找一种方法来对齐许多元素(跨度,输入和按钮),这样即使它们的大小不同,它们的垂直中点也在同一条水平线上:
我如何在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>
Sic*_*pie 13
设置主div的line-height:最高的元素的高度以像素,然后设置vertical-align: middle.您可能还必须设置display:inline或display:inline-block在子元素上.
这应该工作.
iam*_*nal 12
正如其他人(David Nguyen和thirtydot)所说的那样,只要你摆脱代码中当前的花车,添加vertical-align:middle;就能达到你想要的效果.添加将让你更好地控制尺寸,我不知道你是否正在计划它,但我肯定会换掉你的实际标签.display:inline-block;<span class="label"><label>