垂直对齐 - 使用“list-style-image”列出
Posted
技术标签:
【中文标题】垂直对齐 - 使用“list-style-image”列出【英文标题】：Vertical Align - List with "list-style-image" 【发布时间】：2012-11-07 09:33:43 【问题描述】：谷歌搜索和浏览 SO 都没有帮助我 - 希望这里有人可以解决这个问题：
我有以下 html：
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
和css
ul list-style-image:url(../img/hook.png);
li vertical-align:middle;color:#FFFFFF;font-size:16px;text-shadow: 0em 0.13em 0.13em #2A2A2A;font-family:Helvetica,Arial,Sans-Serif;font-weight:normal;
“hook.png”图像为 32x35 像素 - 但每当我创建列表项时，文本（例如 ABC...）将始终显示在图像下方。尝试了 line-height 和那些 100% 的东西 - 但都没有成功。
任何快速帮助：/？
【问题讨论】：
你试过将每个LI的高度设置为35px吗？ 是的 - 他们不工作 - 只是让我的线条更大，但文本仍然不是垂直对齐：我的图像中间：/ 仅供参考：vertical-align 仅适用于表格单元格。
【参考方案1】：
如果我理解您的问题是文本似乎低于基线？
尝试为您的文本设置 beelow 属性：
底部填充
【讨论】：
【参考方案2】：尝试一些变体
ul
background-image: url(../img/hook.png);
background-repeat: no-repeat;
background-position: 95% 50%;
显然该职位不太可能满足您的需求，但我会说，摆弄这种方法是您最好的选择。
【讨论】：
vertical-align:middle is part of CSS, and isn’t deprecated。但是您完全正确，将列表项图像实现为背景图像可以比list-style-image 更好地控制其垂直位置。【参考方案3】：
<html>
<head>
<style>
ul
list-style-image:none;
li
color:#FFFFFF;
font-size:16px;
text-shadow: 0em 0.13em 0.13em #2A2A2A;
font-family:Helvetica,Arial,Sans-Serif;
font-weight:normal;
line-height:35px;
margin-bottom:5px;
padding-left: 36px;
background-image: url('../img/hook.png');
background-repeat:no-repeat;
</style>
</head>
<body>
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
</body>
</html>
从未见过我们的任何设计师在为列表实现自定义图标时尝试使用列表样式图像，我想这就是原因:)
【讨论】：
那他们往哪边走呢？通过 css 在每个 li 项目上添加图像？ 好吧，我刚刚删除了列表，并使用了带有背景图像和填充的 DIV 类……我认为列表会更令人印象深刻……但最终客户不会在意它是如何完成的-_- @Kris 正如你所看到的，他们大多使用背景图像。我遇到的其他实现只是我想出了类似的东西，这可能会节省你一些时间 HTML：
<ul class="rozcestnik">
<li><a href="#" title="1">1</a></li>
<li><a href="#" title="2">2</a></li>
<li><a href="#" title="3">3</a></li>
</ul>
CSS：
.rozcestnik
list-style-type: none;
padding: 0;
margin: 2.5em 2em 0;
.rozcestnik li:before
background: url("icon.png") no-repeat scroll 50% 50% transparent;
content: " ";
display: block;
height: 20px;
left: -20px;
position: absolute;
top: 0;
width: 20px;
.rozcestnik li
position: relative;
padding-bottom: 5px;
padding-left: 5px;
根据自定义列表图像，您可能只需要自定义 ":before" 的顶部和大小以及 "li" 的填充。
它适用于所有主流浏览器和应用程序 IE8 等。
【讨论】：
以上是关于垂直对齐 - 使用“list-style-image”列出的主要内容，如果未能解决你的问题，请参考以下文章