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

【问题标题】：How can I vertically align my div inside another div and keep them side by side?如何将我的 div 垂直对齐另一个 div 并将它们并排放置？
【发布时间】：2013-04-16 16:34:01
【问题描述】：

我在另一个 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。

麻烦的是它们看起来像这样......

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

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

【问题讨论】：

您链接到的解决方案可以正常工作。 jsfiddle.net/Bb4Ye/1
@Juhana。不，不是jsfiddle.net/7Fewx/617
Looks ok to me

标签： html

【解决方案1】：

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

【讨论】：

很好，如果您在页面上只需要这些。如果不是，并且空间有限，它们会包装。
他们也会用浮动包装。

【解决方案2】：

所有'div'内所有元素的'line-height'必须相等

【讨论】：

【解决方案3】：

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

       <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？希望这可以帮助。 :)

【讨论】：

是的。麻烦的是这些 div 已经在一个表中。嵌套表也有自己的问题。
我明白了。那么用 display: inline 替换 float 怎么样？
是的，好电话。无论如何，我赞成你的回答，因为它有效。

【解决方案4】：

使用如下代码：（我建议你尽量避免使用表格）

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

【讨论】：

【解决方案5】：

如果真的需要 DIV，可以使用“display: inline;”代替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>

希望这会有所帮助。

【讨论】：

是的，我确实需要使用 DIV。这个解决方案是完美的。谢谢。