как выровнять текст списка по центру - PullRequest
Новая
       30

как выровнять текст списка по центру

0 голосов
/ 06 января 2010

Я использую изображение для элемента "li". проблема в том, что текст отображается под изображением. как выровнять текст по центру изображения списка?

выглядит следующим образом image

CSS: 

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

HTML: 

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

Ответы [ 2 ]

4 голосов
/ 06 января 2010

Попробуйте вместо этого использовать background-image. Затем установите относительные отступы / отступы, это должно помочь.

Однако учтите, что если у пользователя не включены изображения, это может вызвать проблемы с удобством использования.

1 голос
/ 06 января 2010

Вы можете использовать :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.

...