在div中的ul旁邊垂直對齊圖像

Question

我成功地將ul在容器div垂直對齊。

我的問題是如何在垂直對齊的ul旁邊垂直對齊img 。

的HTML

<div id="container">
<div style="float: left;">
<img src="logo.png" style="height: 50px;" />
</div>
<ul>
<li>Example</li>
<li>Example</li>
</ul>
</div>

的CSS

#container {
 display: table;
 background: red;
}

#container ul {
 display: table-cell;
 vertical-align: middle;
}

#container li {
 display: inline;
 vertical-align: middle;
}

Jsfiddle： https ：//jsfiddle.net/q1dy3zqk/2/

Answer 1

您可以嘗試使用display:flex;

 #container { display: table; background: red; display:flex; justify-content:center; align-items:center; } #container ul { display: table-cell; vertical-align: middle; } #container li { display: inline; vertical-align: middle; } 

 <div id="container"> <div> <img src="http://lorempixel.com/100/50" style="height: 50px;" /> </div> <ul> <li>Example</li> <li>Example</li> </ul> </div> 

Answer 2

您可以嘗試使用display：flex和align-items：center

 #container { background: red; display: flex; height: 300px; } .image{ display: flex; align-items: center; } #container ul { align-items: center; display: flex; } #container li { display: inline; vertical-align: middle; } 

 <div id="container"> <div class="image"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRFiBE-kc80qZxHO5H7qTc__JvAFpi54QcV8O5qagA8RcRA6661Ag" /> </div> <ul> <li>Example</li> <li>Example</li> </ul> </div>