包含图像 <img> 的列表项 <li> 未与其他 <li> 包含的文本垂直对齐
List Item <li> containing image <img> not vertically aligning with other <li>'s containing text
我的 <ul> 元素有一些 <li> 包含文本，还有一个包含图像。我希望它们显示在一行中，在父元素内水平居中，并且它们的 <li> 内容在垂直和水平方向居中。我有以下代码：
http://codepen.io/littlemissintrovert/pen/NqqLRr
到目前为止，进展顺利，但是，我对包含 <img> 的 <li> 有疑问。它的位置高于其他 <li> 元素。
我找不到很多资源来帮助我解决这个问题。也许我搜索很烂，但我发现了这个 link：List items appearing below other list items containing images。看来我们有同样的问题，有人建议使用：
display: table-cell;
vertical-align: middle;
但是，当我尝试使用它时，我无法将 <ul> 相对于其父容器的大小水平居中。另外，我无法使用边距 space 输出我的 <li> 元素。
我真的想尽可能避免定义宽度。我希望我的元素 100% 跨越屏幕。
用于修复 img 问题
- 将
display:block 添加到 a 标签，因为它是 inline 元素
- 为
img 标签添加 vertical-align:middle，因为 img 是一个 inline 元素，它将垂直居中对齐
- 您还可以使用此技术在
li 的 left 一侧添加 margin
#mainnav li + li{
margin: 0 0 0 3em;
}
只会为下一个元素赋予样式
只需在图像中添加 vertical-align:middle 即可解决您的问题：
检查更新后的 Codepen Here.
我的 <ul> 元素有一些 <li> 包含文本，还有一个包含图像。我希望它们显示在一行中，在父元素内水平居中，并且它们的 <li> 内容在垂直和水平方向居中。我有以下代码：
http://codepen.io/littlemissintrovert/pen/NqqLRr
到目前为止，进展顺利，但是，我对包含 <img> 的 <li> 有疑问。它的位置高于其他 <li> 元素。
我找不到很多资源来帮助我解决这个问题。也许我搜索很烂，但我发现了这个 link：List items appearing below other list items containing images。看来我们有同样的问题，有人建议使用：
display: table-cell;
vertical-align: middle;
但是，当我尝试使用它时，我无法将 <ul> 相对于其父容器的大小水平居中。另外，我无法使用边距 space 输出我的 <li> 元素。
我真的想尽可能避免定义宽度。我希望我的元素 100% 跨越屏幕。
用于修复 img 问题
- 将
display:block添加到a标签，因为它是inline元素 - 为
img标签添加vertical-align:middle，因为img是一个inline元素，它将垂直居中对齐 - 您还可以使用此技术在
li 的
left 一侧添加 margin
#mainnav li + li{ margin: 0 0 0 3em; }
只会为下一个元素赋予样式
只需在图像中添加 vertical-align:middle 即可解决您的问题：
检查更新后的 Codepen Here.