如何将列表文本居中对齐答案

【问题标题】：how to align list text to center如何将列表文本居中对齐
【发布时间】：2011-01-01 23:52:50
【问题描述】：

我正在为“li”元素使用图像。问题是图片下显示的文字。如何将文字对齐到列表图片的中心？

如下图

css:

 ul.mark{
list-style-image: url('bullet1.jpg');
 }

html:

<ul class='mark'> 
  ...
</ul>

【问题讨论】：

你是怎么做到的？通过list-style-image 或通过background-image?

标签： html text alignment html-lists

【解决方案1】：

您可以使用:before 将图像放在<li> 元素的前面。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Name of the page</title>
        <meta http-equiv="content-type" content="text/html; charset=utf8">
        <style type="text/css">
            ul { 
                list-style: none;
            }
            li { }
            li:before {
                display: inline-block;
                vertical-align: middle;
                height: 64px;
                width: 64px;
                content: ' ';
                background-image: url(bullet_64.png);
            }

        </style>
    </head>
    <body>
        <ul>
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </body>
</html>

然后，如果您需要将其放置在更靠左的位置（通常显示项目符号的位置），则可以为其添加边距。

这应该适用于所有现代浏览器以及 IE8。

【讨论】：

但遗憾的是，它在 IE6 和 7 中不起作用 - 因此，目前对于任何主流网站来说都是不可能的。
是的。留给 Microsoft 让我们等待 11 年以上才能支持此类基本内容。 (Grrrr) - 但这不会阻止我。我早就停止了解决 IE 问题的方法。如果人们想使用损坏的浏览器，让他们看到损坏的页面。 （幸运的是，我是个体经营者 xD）

【解决方案2】：

尝试改用背景图片。然后设置相对填充/边距，这应该可以解决问题。

但是，还要考虑如果用户没有启用图像，这可能会导致可用性问题。

【讨论】：