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;
}

您好，

我在p-tag和输入中有一个带文本的div（文本可能很长）。我希望文本旁边的输入垂直居中，但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>

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

4 个答案: