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

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

<!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-код для достижения этого эффекта?

источник

2010-03-04 John Livermore

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

<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>

источник

2010-03-04 16:39:57 Robusto

Спасибо за быстрые ответы пользователей! –

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

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

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

источник

2010-03-04 16:36:27 Sarfraz

Это то, что вам нужно?

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

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

источник

2010-03-04 16:39:44 Sniffer

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

источник

2010-03-04 16:41:16 Emily

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

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

В этом случае вам не нужно жестко закодировать значение высоты (21px или что-то). Refer to: CSS vertical alignment text inside li

источник

2014-09-30 13:41:25

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

ответ

Смежные вопросы