Question

我正在使用图片作为“li”元素。问题是image.how下显示的文本是否将文本与列表图像的中心对齐？

如下所示

的CSS：

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

HTML：

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

Answer 1

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

但是，还要考虑用户是否未启用图像，可能会导致可用性问题。

Answer 2

您可以使用: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。

如何将列表文本对齐到中心

2 个答案: