Ant0n39

Выравнивание списка <ul> по вертикали

Рекомендованные сообщения

Добрый день!

Подскажите пожалуйста, споткнулся на простецкой задачи. Как можно выравнять нумерованный список по вертикали, относительно нумерации?

http://skremont39.ru/prajs

Сейчас текст выравнивается по нижней части.

Спасибо!

 

нумерация.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Спасибо большое! Сейчас встало более или менее нормально, не бросается так в глаза.

Подскажите, а как сделать к обычному тексту?

К примеру список на главной странице

http://skremont39.ru/

Там

li {
    vertical-align: top;
}

Не срабатывает(

 

Безымянный.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

почитайте про vertical-align
у разных элементов он работает по разному
в вашем случае он будет отрабатывать на элементах относительно соседних
https://habr.com/ru/company/netcracker/blog/277433/

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Можно добавить этот маркер как фоновое изображение для элемента li > 

с выравниванием по вертикали по центру, задав для этого позицию фона = 0% 50% 

а текстовое содержимое  элемента li >  выравнивать внутренними отступами - padding ,)) 

    <! ———- Your current style ———- >

.inner ul,   .inner ol   {
        margin: 10px 0 10px 20px;
}
.main-content li   {
        vertical-align: top;
        font-size: 14px;
        line-height: 1.8;
        list-style-image: url(images/galka.png);
        list-style-position: outside;
}

    <! —— Your current style end ——- >

    /*  —————--   V / S   —————-  */

    <! — Future style perspective —— >

.inner ul,   .inner ol   {
        margin: 10px 0 10px 0;
}
.main-content li   {
        background: url(images/galka.png) 0% 50% no-repeat;
        list-style-type: none;
        padding: 4.5px 0 4.5px 30px;
}
 
    <! — Future style perspective end — >
 
P.s _ .(.
           _this decision is okay ☑️ 
.).
...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Попробую обязательно и такой вариант, сейчас вышел из ситуации уменьшив размер иконки

http://skremont39.ru/

Сегодня еще поэкспериментирую.

Спасибо за помощь!

Изменено пользователем Ant0n39

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.