垂直对齐图像在 div 内的 ul 旁边

Question

我已经成功地设法在容器div内垂直对齐ul。

我的问题是如何在垂直对齐的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;
}

杰斯菲德尔：https://jsfiddle.net/q1dy3zqk/2/

Answer 1

您可以尝试使用显示：弯曲和对齐项目：居中

#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>

Answer 2

你可以尝试用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>