Css align tag a inside li, вертикальное меню

Как сделать вертикальное и горизонтальное выравнивание middle тега a внутри li? Почему vertical-align:middle; внутри ulli не работает? Что лучше использовать padding или vertical-align?Css align tag a inside li, вертикальное меню

body{ 
 
\t margin:0; 
 
} 
 
.col1{ 
 
\t width:150px; 
 
\t border:solid; 
 
\t height:750px; 
 
\t display:table; 
 
} 
 
ul{ 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
ul li{ 
 
\t list-style:none; 
 
\t height:40px; 
 
\t vertical-align:middle; 
 
} 
 
ul li a{ 
 
\t text-decoration:none; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Document</title> 
 
\t <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
<div class="col1"> 
 
\t <ul> 
 
\t \t <li><a href="">Items</a></li> 
 
\t \t <li><a href="">Products</a></li> 
 
\t \t <li><a href="">Contacts</a></li> 
 
\t \t <li><a href="">Other</a></li> 
 
\t \t <li><a href="">Email</a></li> 
 
\t </ul> 
 
</div> 
 
</body> 
 
</html>

источник

2016-05-08 A191919

Добавьте следующее к вашему <ul>. Причина, по которой это будет работать, состоит в том, что у родителя <ul> установлен его номер display: table;. Дети ответят на vertical: align center;, если их значение для отображения установлено на table-cell. Также обратите внимание, что мы позиционируем <ul>, а не индивидуальное <li> s.

ul { 
    ... 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

Кроме того, рассмотреть вопрос об установлении высоты .col1 «s к 100vh вместо жестко прописанных значения пикселя.

.col1 { 
    ... 
    height: 100vh; 
}

Для вертикального выравнивания якоря внутри каждого отдельного элемента списка, мы добавим следующее:

ul li { 
    ... 
    position: relative; 
} 
ul li a { 
    ... 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

Выход

http://codepen.io/antibland/pen/jqdwqG

источник

2016-05-08 08:24:39

При создании фрагментов кода попробуйте использовать тот, который не сохраняет новые изменения. Как codepen. – Persijn

Но как сделать вертикальное выравнивание середины тега внутри ли? Bacuse теперь находится сверху. – A191919

Я обновил демоверсию и сам ответ сам. –

-2

вы можете использовать запас: 0 авто; он сделает их центрированными

источник

2016-05-08 08:21:37

-1

Если вы хотите использовать vertical-align: middle для позиционирования, вы можете создать высоту линии размером с высоту контейнера (col1) и установить вертикальное выравнивание по ul. Он работает следующим образом: http://codepen.io/anon/pen/bpzReW. Тем не менее, я думаю, что у Энди есть лучшее решение.

источник

2016-05-08 08:41:44 JoostS

Я хочу показать альтернативное решение. Не нужно ниспровергать. Я поддержал ответ Энди. – JoostS

Css align tag a inside li, вертикальное меню

ответ

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