ul li 文本垂直对齐略低于垂直中心
Posted
技术标签:
【中文标题】ul li 文本垂直对齐略低于垂直中心【英文标题】:ul li text vertical alignment a bit lower than vertical center 【发布时间】:2012-08-15 13:17:05 【问题描述】:我在将 ul li 中的文本放置在比中心垂直对齐低一点的位置时遇到了一些麻烦。 我的代码在jsFiddle
我希望它是相同的,在大多数浏览器中看起来都一样,但文本比实际低 10 像素。
谢谢。
<style>
#super-ul
list-style-type : none;
padding-top : 0;
overflow : hidden;
float : left;
#super-ul li
display : inline-block;
border:1px solid red;
#super-ul li img
vertical-align : middle;
</style>
<ul id="super-ul">
<li><a href="#"><img src="http://www.google.by/images/icons/product/chrome-48.png" ></a></li>
<li><div><a href="#">This text should be valigned center but 10px down</a></div></li>
</ul>
【问题讨论】:
【参考方案1】:不完全是您正在搜索的解决方案,但您可以使用 <sub>
标记,并调整字体大小。
问题是您无法指定将应用的边距。
(你也可以将<sub>
标签加倍来增加这个边距,但它开始很丑)
【讨论】:
【参考方案2】:试试这个
super-ul li.test 位置:相对;顶部:10px;
只需将此 li 应用于特定的 li
【讨论】:
【参考方案3】:我已根据您的要求使用了nth-child
CSS 选择器
查看更新后的CSS
#super-ul
list-style-type : none;
padding-top : 0;
overflow : hidden;
float : left;
#super-ul li
display : inline-block;
border:1px solid red;
#super-ul li:nth-child(2n)
display : inline-block;
border:1px solid green;
top:10px;
position:relative;
#super-ul li img
vertical-align : middle;
查看演示:-
http://jsfiddle.net/8Ncmq/36/
希望你是这样的......
【讨论】:
以上是关于ul li 文本垂直对齐略低于垂直中心的主要内容,如果未能解决你的问题,请参考以下文章