在列表项中垂直对齐图像和文本

问题描述：

但是，我似乎无法得到图像和文本显示veritcally在每个列表项。任何有关如何做到这一点的建议。

谢谢

我解决问题的办法

<html> 
<head> 
<style type="text/css"> 
li 
{ 
display:inline; 
} 

table 
{ 
display:inline; 
} 
</style> 
</head> 
<body> 
<ul> 
<li> 
<table> 
<tr><a href="#"><img /></a></tr> 
<tr><a href="#">one</a></tr> 
</table> 
</li> 
<li> 
<table> 
<tr><a href="#"><img /></a></tr> 
<tr><a href="#">two</a></tr> 
</table> 
</li> 
<li> 
<table> 
<tr><a href="#"><img /></a></tr> 
<tr><a href="#">three</a></tr> 
</table> 
</li> 
<li> 
<table> 
<tr><a href="#"><img /></a></tr> 
<tr><a href="#">four</a></tr> 
</table> 
</li> 
<li> 
<table> 
<tr><a href="#"><img /></a></tr> 
<tr><a href="#">five</a></tr> 
</table> 
</li> 
</ul> 
</body> 
</html>

答

您可以在文本前加<br />，像这样：

<ul> 
    <li><a href="#"><img /><br />one</a></li> 
    <li><a href="#"><img /><br />two</a></li> 
    <li><a href="#"><img /><br />three</a></li> 
    <li><a href="#"><img /><br />four</a></li> 
    <li><a href="#"><img /><br />five</a></li> 
</ul>

并更改CSS来此：

li { 
    display: inline-block; 
    list-style-type: none; 
}

不幸的是，使用div标签会导致列表垂直显示，而不是水平显示 –

重新阅读您的问题后，我改变了我的答案。让我知道它是如何工作的。 – woz

内联块导致列表垂直显示 –

答

图像的高度都一样吗？如果是这样，您可以将line-height值应用于li a规则。你可能不得不摆弄它才能找到正确的价值，但那会起作用。

以上是的图像是固定的高度和宽度。让我试试看 –

在列表项中垂直对齐图像和文本

相关推荐