对齐的DIV子的div内容垂直排列中心

所以我有一个div它看起来像对齐的DIV子的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 {余量：0像素;} #socialMediaBarHomepage {显示：表; } #homepageNewsLink {display：table-cell; vertical-align：middle; } #socialMediaHeaderBar {display：table-cell; vertical-align：middle; }

来源

2012-12-21 StevieB

请出示你的CSS –

垂直对齐CSS属性只适用于TD标记，如果我记得一些内联对象对齐（如图像）。你可以尝试的是设置父div的显式高度，并使用sub-divs margin-top和margin-bottom，值为auto 你也可以在父div上使用display：table-cell并且坚持vertical-align。

来源

2012-12-21 16:31:48 topr

试过，但没有喜悦#socialMediaBarHomepage {高度：30PX;} #homepageNewsLink {边距：汽车;边距：自动;} #socialMediaHeaderBar {边距：汽车;与容限底部：汽车; }儿童div根本不会移动 – StevieB

尝试设置位置：相对于您的div，或者甚至更好地避免浮动并使用position：absolute或display：inline-block。在这里你可以看到[一些垂直居中CSS的例子]（http://blog.themeforest.net/tutorials/vertical-centering-with-css/）。 – topr

对齐的DIV子的div内容垂直排列中心

回答

相关问题