将Div与Sub Divs内容对齐垂直对齐的中心

时间:2012-12-21 16:26:36

标签: css css-float

所以我有一个看起来像

的div
<div id="socialMediaBarHomepage">
<div id="homepageNewsLink">
    <img src="" alt="" class="mr_10"/>
    <a href=""></a>
</div>
<div id="socialMediaHeaderBar" class="fl_right">
    <div id="headerMediaStayConnected" class="fl_left mr_5">
    A bit of Text
    </div>
    <div id="headerMediaIcons" class="fl_left">
    Image Image Image
    </div>
<div>

所以我有1个主div,有2个子div。

1向左浮动,向右浮动1。它基本上是我主页的一个栏。

在左侧,我显示一个图标和一个新闻链接

在右侧,我会显示标签和社交媒体图标。

我想要做的只是在这个栏中垂直对齐中间的一切,但是甚至无法靠近。关于如何完成这项工作的任何想法?

CSS

   #homepageNewsLink a, #homepageNewsLink img { float: left; }

#headerMediaIcons ul {margin:0px;}    #socialMediaBarHomepage {display:table; }    #homepageNewsLink {display:table-cell; vertical-align:middle; }    #socialMediaHeaderBar {display:table-cell; vertical-align:middle; }

1 个答案:

答案 0 :(得分:0)

vertical-align CSS属性仅适用于TD标记,如果我记得一些内联对象对齐(如图像)。 您可以尝试设置父div的显式高度,并在sub-divs margin-top和margin-bottom上使用值auto 您还可以在父div上使用display:table-cell并坚持使用vertical-align。