0

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

看起来如下图片

CSS：

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

html:

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

2 回答 2

4

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

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

于 2010-01-06T10:18:24.473 回答
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。

于 2010-01-06T10:27:35.047 回答