垂直对齐im和文本在li [英] vertical align img and text within li

问题描述

例如：

 < ul> 
< li>< img src =somepath/> sometext 
< / li> 
< li>< img src =somepath2/> sometext2 
< / li> 
< / ul> 
  

我该怎么办呢？
感谢

解决方案

假设你的列表项有固定的高度，你可以使用 height 结合 vertical-align：middle 。

示例：

  ul li {
 display：block; 
 height：100px; 
 line-height：100px; 
} 
 
 ul li img {
 vertical-align：middle; 
} 
  

这里的工作示例。

I am trying to vertically align to the middle both an image and some text within a list element but having no luck.

eg:

<ul>
 <li><img src="somepath" /> sometext
  </li>
<li><img src="somepath2" /> sometext2
  </li>
</ul>

how can i do it? thanks

解决方案

Assuming your list items have a fixed height, you can use line-height combined with vertical-align: middle to do this.

Example:

ul li {
    display: block;
    height: 100px;
    line-height: 100px;
}

ul li img {
    vertical-align: middle;
}

Working example here.

这篇关于垂直对齐im和文本在li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！