Решил написать разметку для сайта, тематика: "Онлайн буклет одежды".
Столкнулся с проблемой: в теге li
нельзя выровнять по центру по вертикали, только по горизонтали.
Прочитал кучу туторов и все как один говорят: установить display: inline-table;
и vertical-align: middle;
, но ничего не работает.
В чём может быть проблема?
.Content{
background-color: #f7f7f7;
width: 600px;
height: 100%;
border-radius: 0 20px 20px 20px;
float: left;
}
.categories{
float: left;
border-radius: 20px 0 0 20px;
background-color: #f7f7f7;
width: 200px;
height: 800px;
}
.CategoryReference{
font-size: 14pt;
margin: auto;
color: #04c;
text-decoration: none;
}
ol {
padding: 0px;
padding-top: 18px;
list-style: none;
}
li{
display: inline-table;
width: 100%;
height: 36px;
border-bottom: 1px solid #38546F;
text-align: center;
vertical-align: middle;
}
#resourceLinks a:visited{
color: #04c;
}
a:visited {
color: #5a7bad;
}
a:link {
color: #04c;
}
a:hover{
color: #a5c3fe;
}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="new 1.css">
</head>
<body style="background-image: url(BGI.jpg);">
<div style="width: 800px; height: 1000px; margin: auto;">
<div class="categories">
<ol style="margin: auto;">
<li>
<a class="CategoryReference" href="vk.com">Рубашки</a>
</li>
<li>
<a class="CategoryReference">Блузки</a>
</li>
<li>
<a class="CategoryReference">Топы</a>
</li>
<li>
<a class="CategoryReference">Футболки</a>
</li>
</ol>
</div>
<div class="Content">
</div>
</div>
</body>
</html>