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

Тема в разделе "Верстка", создана пользователем Rudoy1488, 5 сен 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Rudoy1488

    Rudoy1488 Постоялец

    Регистр.:
    29 июл 2013
    Сообщения:
    105
    Симпатии:
    46
    Господа, изменил на сайте иконки маркеров на свои, но появилась проблема... текст находится не по центру маркера. Подскажите пожалуйста как решить с помощью css. vertical-align как я понимаю можно применить только если текст в списке сделать ссылками, но данное решение вообще не подходит. Извиняюсь за тупку, плохо знаю html, гугл не помог особо.
    [​IMG]

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

    HTML:
    <ul>
    <li>на стенах здания скопились сажа, пыль и копоть;</li>
    <li>на фасаде образовались высолы или ржавчина;</li>
    <li>стены изукрасили самозваные мастера граффити.</li>
    </ul>
    HTML:
    .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);
    
    }
     
  2. Veysel

    Veysel Создатель

    Регистр.:
    17 июл 2011
    Сообщения:
    21
    Симпатии:
    5
    <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="
    http://test1.ru/themes/minimalist/images/list.png
    ">на стенах здания скопились сажа, пыль и копоть;</li>
    <li><img src="
    http://test1.ru/themes/minimalist/images/list.png
    ">на фасаде образовались высолы или ржавчина;</li>
    <li><img src="
    http://test1.ru/themes/minimalist/images/list.png
    ">стены изукрасили самозваные мастера граффити.</li>
    </ul>
    </div>
     
    Rudoy1488 нравится это.
  3. gorlov_89

    gorlov_89 Писатель

    Регистр.:
    4 сен 2014
    Сообщения:
    3
    Симпатии:
    2
    <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(https://cdn0.iconfinder.com/data/icons/communication-technology/500/list-48.png);
    line-height: 48px; // высота иконки
    }
    span {
    vertical-align: top;
    }
     
    Veysel и Rudoy1488 нравится это.
  4. Anton_Fadeev

    Anton_Fadeev Постоялец

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

    Rudoy1488 Постоялец

    Регистр.:
    29 июл 2013
    Сообщения:
    105
    Симпатии:
    46
    был бы примного благодарен
     
  6. Anton_Fadeev

    Anton_Fadeev Постоялец

    Регистр.:
    3 фев 2014
    Сообщения:
    50
    Симпатии:
    10
    Вот вариант на скорую руку, но главное понятен принцип:
    HTML:
    
    <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: - отступ снизу между пунктами. Не обязателен, я использую чтобы разрядить и добавить немного воздуха между пунктами.
     
    Rudoy1488 нравится это.
  7. Anton_Fadeev

    Anton_Fadeev Постоялец

    Регистр.:
    3 фев 2014
    Сообщения:
    50
    Симпатии:
    10
    Кстати, зачем вы дважды указываете одинаковые стили:
    font-family: tahoma;
    font-size: 14px;
    color: #737373;

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

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

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

    Ismail Писатель

    Регистр.:
    15 янв 2012
    Сообщения:
    1
    Симпатии:
    2
    Еще можно vertical-align:; использовать, в крайнем случае - margin-top:-x; ))
     
  9. Festem

    Festem Постоялец

    Регистр.:
    4 сен 2014
    Сообщения:
    97
    Симпатии:
    26
    Не всегда работает.
    Я делал картинку со сдвигом вверх, т.е. добавлял снизу картини пару пикселей белого пространства, выход конечно криворукий, но зато во всех браузерах одинаково работает, потому что не все браузеры margin и padding обрабатывают одинаково