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

[Rudoy1488]

Господа, изменил на сайте иконки маркеров на свои, но появилась проблема... текст находится не по центру маркера. Подскажите пожалуйста как решить с помощью css. vertical-align как я понимаю можно применить только если текст в списке сделать ссылками, но данное решение вообще не подходит. Извиняюсь за тупку, плохо знаю html, гугл не помог особо.

Не знаю есть ли смысл, но приложу куски кода.

Пример html

<ul>
<li>на стенах здания скопились сажа, пыль и копоть;</li>
<li>на фасаде образовались высолы или ржавчина;</li>
<li>стены изукрасили самозваные мастера граффити.</li>
</ul>

CSS

.content ul{
font-family: tahoma;
font-size: 14px;
color: #737373;
}

.content ul li{
font-family: tahoma;
font-size: 14px;
color: #737373;
list-style: url(http://test1.ru/themes/minimalist/images/list.png);

}

 

[Veysel]

<style type="text/css">
.content ul{
font-family: tahoma;
font-size: 14px;
color: #737373;
}

.content ul li{
display:block;
margin-bottom:3px;
font-family: tahoma;
font-size: 14px;
color: #737373;
}
.content ul li img{
margin-right:5px;
margin-bottom:-3px; /*делаем нижний margin сколько нужно*/
}
</style>

<div class="content">
<ul>
<li><img src="
Для просмотра ссылки Войди или Зарегистрируйся
">на стенах здания скопились сажа, пыль и копоть;</li>
<li><img src="
Для просмотра ссылки Войди или Зарегистрируйся
">на фасаде образовались высолы или ржавчина;</li>
<li><img src="
Для просмотра ссылки Войди или Зарегистрируйся
">стены изукрасили самозваные мастера граффити.</li>
</ul>
</div>

 

[gorlov_89]

<li><span>стены изукрасили самозваные мастера граффити.</span></li>


ul{
font-family: tahoma;
font-size: 14px;
color: #737373;
}

ul li{
font-family: tahoma;
font-size: 14px;
color: #737373;
list-style: url(Для просмотра ссылки Войди или Зарегистрируйся
line-height: 48px; // высота иконки
}
span {
vertical-align: top;
}

 

[Anton_Fadeev]

Если предполагаются пункты размером в 1-ну строку, то простой вариант как показали выше - с помощью добавления line-height равной высоте картинки. Еще есть распространенный вариант, когда картинку вставляют в виде фона, при этом добавив отступ слева равный ширине картинки. и там уже с помощью background-position можно выровнять как угодно и при многострочных пунктах будет норм работать. Чуть позже если интересно выложу рабочий вариант

 

[Rudoy1488]

Если предполагаются пункты размером в 1-ну строку, то простой вариант как показали выше - с помощью добавления line-height равной высоте картинки. Еще есть распространенный вариант, когда картинку вставляют в виде фона, при этом добавив отступ слева равный ширине картинки. и там уже с помощью background-position можно выровнять как угодно и при многострочных пунктах будет норм работать. Чуть позже если интересно выложу рабочий вариант

был бы примного благодарен

 

[Anton_Fadeev]

Вот вариант на скорую руку, но главное понятен принцип:

<style>
li {
    list-style:none;
    background:url('https://cdn1.iconfinder.com/data/icons/dortmund/Dortmund-32x32/finished-work.png') 5px 5px no-repeat;
    padding-left:40px;   
    min-height:35px;
    padding-top: 10px;
    margin-bottom:10px;
}
</style>
<ul>
<li>на стенах здания скопились сажа, пыль и копоть;</li>
<li>на фасаде образовались высолы <br />или ржавчина;</li>
<li>стены изукрасили <br /> самозваные мастера <br /> граффити.</li>
</ul>

теперь по порядку:
list-style:none; - прячем дефолтный значок пункта у списка

background: url() - тут задается ссылка на картинку для фона, 5px 5px - это где она будет размещаться относительно верха и левого края. В моем примере 5px сверху и слева, можно использовать проценты, например если задать 0 50% тогда при многострочности картинка будет съезжать вниз ровно посередине текста.

padding-left: - отступ слева, чуть больше размера картинки, чтобы текст не прилипал.
min-height: - минимальная высота пункта списка, чтобы если картинка больше чем размер текста, как в моем примере, картинка не обрезалась.

padding-top: - отступ сверху у текста, чтобы выровнять картинку и текст. Если картинка равна по высоте размеру текста - не нужен. Играя параметрами у background и padding-top можно добиться нужного результата.

margin-bottom: - отступ снизу между пунктами. Не обязателен, я использую чтобы разрядить и добавить немного воздуха между пунктами.

 

[Anton_Fadeev]

Кстати, зачем вы дважды указываете одинаковые стили:
font-family: tahoma;
font-size: 14px;
color: #737373;

в вашем случае достаточно прописать либо у ul либо у ul li

и font-family лучше указывать так:
font-family:Tahoma, Geneva, sans-serif;

Это означает, что если у пользователя есть на устройстве этот шрифт, он возьмет его, если нет, поищет следующий по списку, опять не нашел? - тогда любой другой из семейства sans-serif.

 

[Ismail]

Еще можно vertical-align:; использовать, в крайнем случае - margin-top:-x; ))

 

[Festem]

Еще можно vertical-align:; использовать, в крайнем случае - margin-top:-x; ))

Не всегда работает.
Я делал картинку со сдвигом вверх, т.е. добавлял снизу картини пару пикселей белого пространства, выход конечно криворукий, но зато во всех браузерах одинаково работает, потому что не все браузеры margin и padding обрабатывают одинаково