CSS вертикально выровнять LI в середине - PullRequest
Новая
       26

CSS вертикально выровнять LI в середине

3 голосов
/ 04 марта 2010

У меня есть следующий HTML-код, где мне нужно, чтобы элементы LI вертикально отображались в середине 21-пиксельной области UL. Вот мой HTML ... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style type="text/css">
        .MenuBar
        {
            padding: 0px;
            border: 1px solid #036;
            height: 21px;
            font-size: 8pt;
        }
        .MenuBar li
        {
            display: inline;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <ul class="MenuBar">
        <li>Link 1</li><li>Link 2</li><li>Link 3</li></ul>
</body>
</html>

Как можно изменить приведенный выше HTML для достижения этого эффекта?

Ответы [ 5 ]

6 голосов
/ 04 марта 2010

Полагаю, вы пытаетесь составить горизонтальный, а не вертикальный список, поскольку вы устанавливаете тип отображения элементов LI на «встроенный». Итак, попробуйте это: 

<style type="text/css">
    .MenuBar
    {
        padding: 0px;
        border: 1px solid #036;
        height: 21px;
        font-size: 8pt;
    }
    .MenuBar li
    {
        display: inline;
        line-height: 21px;
        padding-left: 20px;
    }
</style>
2 голосов
/ 04 марта 2010

Добавить line-height:21px к .MenuBar

2 голосов
/ 04 марта 2010

Это то, что вы после? 

    .MenuBar li
    {
        display: inline;
        padding-left: 20px;
        line-height: 21px;
    }

Как и Сарфраз, я не уверен, что полностью понимаю вопрос.

0 голосов
/ 30 сентября 2014

Самый элегантный и надежный способ сделать это - вставить вспомогательный встроенный элемент в элемент <li /> в качестве первого дочернего элемента, высота которого должна быть установлена ​​на 100% (от высоты его родителя, <li />) и его вертикальное выравнивание установлено в середину. Для этого вы можете поставить <span />, но наиболее удобный способ - использовать li: after псевдо-класс. 

.MenuBar li:before
{
    display: inline;
    height: 100%;
    vertical-align: middle;
    content: '';
}

Таким образом, вам не нужно жестко кодировать значение высоты (21px или что-то в этом роде). Ссылаться на: CSS вертикальный текст выравнивания внутри li

0 голосов
/ 04 марта 2010

Не удалось получить именно то, что вы хотите, но если вы хотите, чтобы списки отображались вертикально, попробуйте следующее: 

    .MenuBar li
    {
        display: block;
        padding-left: 20px;
    }

Просто измените свойство display на block вместо inline. И это тоже поведение по умолчанию.

...