如何在另一个div中垂直对齐我的div并将它们并排放置？

Question

我在另一个div里面有三个div。

<div id="parentDiv" style="float:right;">
   <div id="childDiv1" style="float:left;">
       <b>Text1</b>
   </div>
   <div id="childDiv2" style="float:left;">
       <img src="smiley.gif" alt="Smiley face" height="42" width="42">
   </div>
   <div id="childDiv3" style="float:left;">
       <input type='checkbox' />
   </div>
<div>

我需要它们并排显示，所以我将它们设置为float:left。

问题是它们看起来像这样......

...文本垂直对齐在顶部。我需要它在中间。

N.B。我发现了一篇关于very similar issue的帖子，但似乎浮动导致它失败。

Answer 1

您可以使用表格轻松实现这一目标

       <table>
            <tr>
                <td> <b>Text1</b></td>
                <td><img src="smiley.gif" alt="Smiley face" height="42" width="42"></td>
                <td><input type='checkbox' /></td>
            </tr>
        </table>

或者你真的需要坚持使用div？希望这可以帮助。 ：）

Answer 2

使用以下代码:(我建议您尽可能避免使用表格）

<div id="parentDiv" style="float:right;">
   <div id="childDiv1" style="float:left; line-height: 42px;">
       <b>Text1</b>
   </div>
   <div id="childDiv2" style="float:left;">
       <img src="smiley.gif" alt="Smiley face" height="42" width="42">
   </div>
   <div id="childDiv3" style="float:left; line-height: 42px;">
       <input type='checkbox' />
   </div>
<div>

Answer 3

如果您真的需要DIV，可以使用“ 显示：内联; ”代替 float 。然后 vertical-align：middle; 使元素居中。

    <div id="parentDiv" style=" ">
       <div id="childDiv1" style="display: inline-block; vertical-align: middle;">
           <b>Text1</b>
       </div>
       <div id="childDiv2" style="display: inline-block; vertical-align: middle;">
           <img src="smiley.gif" alt="Smiley face" height="42" width="42">
       </div>
       <div id="childDiv3" style="display: inline-block; vertical-align: middle;">
           <input type='checkbox' />
       </div>
    </div>

希望这有帮助。

Answer 4

为了让它们并排出现，你不需要它们浮动，只需按原样设置它们即可。 至于图像，只需为它添加一个CSS属性：vertical-align:middle，它应该在文本的中间对齐。

Answer 5

所有'div'中所有元素的

'line-height'必须相等