CSS list-style-image

Question

У меня возникла проблема с тегом CSS list-style-image. Изображение моего списка немного велико, а текст, который находится позади него, перемещается вниз в нижнюю часть тега стиля, есть ли исправление, чтобы вернуть его обратно в середина

теперь это так:

|
|
| here

и я хочу быть:

|
| here
|

Answer 1

Просто увеличьте высоту строки рассматриваемых элементов li.

#iconlist li {
  line-height: 2em;
}

Также, как предложил keithjgrant, я бы вместо этого использовал background-images.Изображения-списки размещены довольно противоречиво в разных браузерах.Так что используйте что-то вроде этого:

#iconlist li {
  padding-left: 22px;
  background: url(20x20-icon.png) left center no-repeat;
  line-height: 22px;
  list-style: none;
}

Answer 2

Забудьте о настройке изображения стиля списка и используйте следующее css ...

ul#example li {
    list-style-type: none;
}

/* create new marker */
ul#example li:before {
    display: marker;
    content: url("new_marker.png");
    /* set the following to fit your needs */
    vertical-align: 3px;
    padding-left: 2px;
    padding-right: 12px;
}

Обратите внимание на стиль выравнивания по вертикали, установите значение минус цифры, чтобы толкать текст вверх.

Источник ответа.

Answer 3

Попробуйте vertical-align: middle; (css)

Answer 4

Единственный реалистичный способ добиться этого - background-image:

ul li {
    background: transparent url(http://farm1.static.flickr.com/120/308863127_6eb1715f3b_m.jpg) 0 50% no-repeat;;
    list-style-position: outside;
    padding-left: 250px;
    line-height: 160px; /* vertical height of image */
}

JS Fiddle demo .

Однако, не удастсяплохо, если текст li переносится во вторую (или третью) строку .

Answer 5

Ваш вопрос немного неясен, но, похоже, вам, возможно, придется смотреть на фоновые изображения, а не (или в дополнение к) изображениям в стиле list.