Выравнивание списка-стиля-изображения

Question

Мне интересно, есть ли способ определить горизонтальное и вертикальное выравнивание list-style-image?

Потому что на данный момент, это выглядит примерно так:

_ СПИСОК TEXT

, и я хотел бы, чтобы это было как этот

– Список Текст

Спасибо большое!

Answer 1

Вы можете попробовать несколько подходов, например:

<h3>Using a list-style-image</h3> 
<ul class="basic"> 
    <li>Hello!</li> 
    <li>Good-Bye!</li> 
    <li>See you later!</li> 
</ul> 

<h3>Using a Background Image on li</h3> 
<ul class="bg-img"> 
    <li>Hello!</li> 
    <li>Good-Bye!</li> 
    <li>See you later!</li> 
</ul> 

и рассмотрим следующий CSS:

ul.basic { 
    list-style: none; 
    list-style-image: url(http://placehold.it/20x20); 
    margin: 0 0 0 0; 
} 
ul.basic li { 
    margin: 1.00em 0 0 0; 
    padding: 0 0 0 0; 
} 

ul.bg-img { 
    list-style: none; 
    margin: 0 0 0 0; 
} 
ul.bg-img li { 
    background-image: url(http://placehold.it/20x5); 
    background-repeat: no-repeat; 
    background-position: left center; 
    margin: 1.00em 0 0 -30px; 
    padding: 0 0 0 30px; 
} 

В первом случае, вы можете сделать список изображений например, квадрат размером 20 × 20 пикселей и вставлять дефис в центр изображения. Однако, если размер шрифта изменится, вы не будете поддерживать вертикальное центрирование, поскольку изображение списка привязано к базовой линии элемента li.

Во втором примере отключите стиль списка и поместите фоновое изображение на элемент li. Снова вставьте дефис в изображение и поместите его влево и в центр. Этот подход дает вам некоторый контроль над положением дефисного мотива путем настройки левого поля и заполнения элемента li и свойства background-position.

Для справки, смотрите по адресу: http://jsfiddle.net/audetwebdesign/JKZLe/

Answer 2

Это контролируется в WebKit и Mozilla, соответственно, но -webkit-padding-start и -moz-padding-start правила по <ul> и <ol> элементов. Его можно переопределить padding-left (это также будет работать и в IE).

ul { 
    padding-left: 40px; 
}