如何使用float：left将输入垂直居中？

Question

的HTML

<div class="containerDiv">
    <p>Test</p>
    <input type="checkbox" checked="checked" />
</div>

的CSS

.containerDiv 
{
    width:600px;
}

.containerDiv p 
{
    margin: 10px 0px 10px 10px;
    float: left; 
    width: 500px;
}

.containerDiv input[type='checkbox']
{
    float: right;
    margin: auto 10px;
}

你好，

我有一个div，在p标签和输入中带有文本（文本可能很长）。 我希望输入文字的垂直居中位置，但要float: left和向margin: auto 10px不起作用。

Answer 1

您可以将复选框放置在absolute位置，并使用top:50%减去复选框高度。 因此，您不需要float:right这个元素，但是给它一个right位置。 观看此演示： http : //jsfiddle.net/4wXuC/1/

Answer 2

对于保证金，请尝试margin: 10px auto; 而不是margin: auto 10px;

Answer 3

使用label代替p并将标签的行高设置为输入的总高度。

Answer 4

 <div style="width: 55px;">
<p style="float: left; margin: 0px 0px 10px 10px; width: auto;">Test</p>
<input checked="checked" style="float: right; margin: 5px auto;" type="checkbox">
 </div>