5

我对 li items 使用 list-style-image 和单行文本。

在此处输入图像描述

但它看起来很糟糕，所以我想将文本垂直对齐到图像的中间。

我应该使用 vertical-align: middle ，对吗？但这对我不起作用。

<html>
    <head>
        <title> This is an demo </title>
        <style>
            body {
                background-color: #464443;
                color: white;
            }
            ul {
                list-style-image: url('bg.png');
            }

            li {
                vertical-align: middle;
            }

        </style>
    </head>

    <body>
        <ul>
            <li>abc</li>
            <li>abc</li>
            <li>abc</li>
            <li>abc</li>
        </ul>
    </body>
</html>
4

3 回答 3

14

一种令人满意的方法（imo）是不使用列表样式图像，而是使用背景属性来设置“项目符号”（注意我替换了我自己的占位符图像，因为我只是从小提琴中复制/粘贴）。您的填充和其他尺寸将根据“子弹”图像的大小而有所不同。

这是小提琴：http: //jsfiddle.net/huBpa/1/

body {
  background-color: #464443;
  color: white;
}

 ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 li {
   background: url('http://lorempixel.com/output/technics-q-c-32-32-1.jpg') no-repeat;
   line-height: 32px;
   vertical-align: middle;
   padding-left: 40px;
 }​
于 2012-04-09T04:08:50.583 回答
4

这就是我会使用的。我不使用垂直对齐，而是使用填充将文本移动到我想要的任何位置。

    ul {
            list-style: none;
            margin-left: 0;
            padding-left: 0;
    }

    li {
            padding: 10px 10px 15px 20px;
            background-image: url(images/arrow.png);
            background-repeat: no-repeat;
            background-position: 0px;
    }
于 2012-04-09T04:51:05.070 回答
-1

将行高添加到 li。确保它与图像的高度相同

` 

li {
            vertical-align: middle;
            line-height: 30px; 
        }
于 2012-04-09T04:11:13.907 回答