5

Вопрос по css, image – CSS: вертикальное выравнивание текста в элементе li, не работает

Я использую list-style-image для элементов li и однострочный текст.

enter image description here

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

Я должен использовать вертикальное выравнивание: середина, верно? Но это не сработало для меня.

<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>
  • Error: User Rate Limit ExceededbackgroundError: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceeded

    от
  • Error: User Rate Limit Exceededjsfiddle.net/huBpa

    от
  • -1

    Добавьте высоту строки в li. Убедитесь

    что это такая же высота, как изображение

    `

    li {
                vertical-align: middle;
                line-height: 30px; 
            }
    

  • 14

    Удовлетворительный способ сделать это (imo) состоит в том

    чтобы не использовать list-style-image, вместо этого используя свойство background, чтобы установить & quot; bullet & quot; (обратите внимание, я заменил свое собственное изображение заполнителя, так как я только что скопировал / вставил из скрипки). Ваше заполнение и другие размеры будут различаться в зависимости от размера маркера "bullet". образ.

    Вот скрипка: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;
     }​
    

  • 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;
        }