列表项<li>包含图像<img/>，不与其他</li> <li>包含文本垂直对齐

Question

我的<ul>元素包含一些<li>个包含文本的元素，另一个包含图像。我希望它们出现在一行中，在父元素内水平居中，以及它们的<li>内容垂直和水平居中。我有以下代码：

http://codepen.io/littlemissintrovert/pen/NqqLRr

到目前为止，它很棒，但是，<li>包含<img>时遇到问题。它的位置高于其他<li>元素。

我找不到太多资源来帮助我解决这个问题。也许我很讨厌，但我找到了这个链接：List items appearing below other list items containing images。我们似乎有同样的问题，有人建议使用：

display: table-cell;
vertical-align: middle;

然而，当我尝试使用它时，我无法相对于其父容器的大小水平居中<ul>。另外，我无法使用保证金来区分我的<li>元素。

尽可能地，我真的想避免定义宽度。我希望我的元素能够跨越屏幕100％。

Answer 1

修复img问题

• 将display:block添加到a代码，因为它是inline元素
• 为vertical-align:middle标记添加img，因为img是inline元素，它会将其垂直对齐
• 您还可以使用此技术在margin
的left一侧添加li

#mainnav li + li{
   margin: 0 0 0 3em;
}

只会为下一个元素提供样式

演示 - http://codepen.io/victorfdes/pen/pJJORw

Answer 2

只需将vertical-align:middle添加到图片即可解决您的问题：

检查更新后的Codepen Here.