将Div与Sub Divs内容对齐垂直对齐的中心(Aligning Div with Sub Divs content Vertically Aligned Center)

 所以我有一个看起来像的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; } 

So I have a div which looks like
 
<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>
 
 
So I have 1 Main div, with 2 sub divs.
 
1 Floating Left and 1 Floating right. Its basically a bar for my homepage.
 
On the left I display an icon and a newslink
 
On the right I display a label and social media icons.
 
What I am trying to do is simply vertically align middle everything in this bar, but can't even get close. Any ideas on how to get this done ?
 
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; }

原文：https://stackoverflow.com/questions/13993695