我如何垂直对齐div的子元素，同时保持它们向左和向右浮动？

Question

我正在重写现有网站的部分内容，非常想清理一些东西。目前，在父div中的某些子元素被float编辑（左和右）时，我必须使用margin-top: 7px;将左浮动的子元素向下推一点，以便它内联使用右浮动的子元素。

我不喜欢这样做。

以下是我期望看到的内容：

但那不是我所看到的。相反，我看到了这一点：

所以我尝试了一些事情，看看能否修复它。原始代码是：

<div id="bottomHeader">
    <p>Some slogan here</p>
    <ul id="SocialLinks">
        <li><a href="#"><img src="~/!/Assets/Images/Twitter.png" alt="" /></a></li>
        <li><a href="#"><img src="~/!/Assets/Images/Facebook.png" alt="" /></a></li>
    </ul>
</div>

#bottomHeader { width: 80%; margin: 0 auto; }
#bottomHeader > p { text-align: left; }
#bottomHeader > p { text-align: right; }

左右对齐它们，但p元素高于ul元素。我意识到这是因为两个元素的默认宽度都是100％。因此，p元素正在推动ul元素下方。

那么我只是想如果我让这两个元素的最大宽度都达到50％，它就会好起来的。但是，不，不。当我这样做时，ul元素（应该是右对齐的）出现在某个地方的中心（几乎就像它左对齐）。然后我将代码更改为：

#bottomHeader { width: 80%; margin: 0 auto; }
#bottomHeader > p { width: 50%; float: left; }
#bottomHeader > p { width: 50%; float: right; }

哪个有效。 然而，现在父div（见上图中的深蓝色矩​​形）的高度小于其子元素的高度，如下所示：

但那仍然不太对劲。 ＆＃39;因为现在看起来div的子元素在父div之外和之下。它也打破了布局。

---

如何垂直对齐div的子元素，同时保持它们向左和向右浮动？

Answer 1

也许display: inline-block正是您所寻找的。

它使元素既可以作为块级框，也可以作为内联级框。

像这样：

#bottomHeader { 
    width: 80%; 
    margin: 0 10% 0 10%; 
    background:pink; 
    display:inline-block;
    height: auto; 
}

<强> SAMPLE