流体 - 垂直对齐的所有元素，两种元素位置左侧和右侧，一个是中心

Question

我这里有三幅影像：

我试图做到：在一个小的图像应该在左边和其他小图像应该是正确的。更大的一个应该在中心。所有这些图像应该垂直对齐。

我试图用text-align，但它不工作：

Fiddle

HTML：

<div id="menu_header_new"> 
    <img id="menu_info" src="https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg" /> 
    <img id="menu_logo" src="https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg" /> 
    <img id="menu_settings" src="https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg" /> 
</div> 

CSS：

body { 
    padding: 0; 
    margin: 0; 
} 
#menu_header_new { 
    margin-top: 2.5%; 
    min-height:20%; 
    width:100%; 
    overflow: hidden; 
    position: relative; 
    border: 1px solid green; 

} 
#menu_logo { 
    position: relative; 
    width: 20%; 
    height: 10%; 
    text-align: center; 
} 
#menu_info, #menu_settings { 
    position: relative; 
    width: 10%; 
    height: 10%; 
} 

#menu_info{ 
    text-align: left; 
} 

#menu_settings{ 
    text-align: right; 
} 

Answer 1

与文本对齐你必须添加带有额外元素或伪元素的行来触发文本对齐N：证明;在单线上。

body { 
    padding: 0; 
    margin: 0; 
} 
#menu_header_new { 
    margin-top: 2.5%; 
    min-height:20%; 
    width:100%; 
    overflow: hidden; 
    position: relative; 
    border: 1px solid green; 
    text-align:justify; 
    font-size:0.01px; 
} 
#menu_header_new:after { 
    content:''; 
    display:inline-block; 
    width:100%; 
    vertical-align:top; 
} 
img { 
    vertical-align:middle; 
} 
#menu_logo { 
    position: relative; 
    width: 20%; 
    height: 10%; 
    text-align: center; 
} 
#menu_info, #menu_settings { 
    position: relative; 
    width: 10%; 
    height: 10%; 
} 

或者你可以使用display:flex;看到display和text-align不同的测试：http://codepen.io/gc-nomade/pen/nrbDl