【问题标题】: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 将图像放在&lt;li&gt; 元素的前面。

<!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】:

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

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

【讨论】:

    猜你喜欢
    • 2017-09-01
    • 1970-01-01
    • 1970-01-01
    • 2018-05-12
    • 2011-08-09
    • 1970-01-01
    • 1970-01-01
    • 2016-05-05
    相关资源
    最近更新 更多