Невозможно центрировать текст по вертикали
Я использую ниже css для отображения некоторого содержимого в полях. Я не могу поместить текст в центр поля. text-align:center не работает. Также пробовал line-height: 30px;, но добавляет пробел между строками. Мне нужно, чтобы это было в центре.
Есть ли какое-нибудь свойство, которое я могу установить, чтобы текст отображался в центре поля?
.sideBarList li {
width: 100px;
height: 60px;
margin: 0;
text-align: center;
line-height: 30px;
border-radius: 10px;
background: pink;
margin: 0 10px 100px 30px;
display: inline-block;
vertical-align: top;
color: black;
position: relative;
text-align: center;
font-family: Arial;
font-size: 11px;
}<ul class = "sideBarList">
<li class = "li">CDE RTR</li>
<li class = "li">ABC</li>
<li class = "li"> TYTYT YTYYT IIIOO TYTYYTYY RTRTRTR</li>
</ul>Использование отступов вместо высоты может решить вашу проблему: удалите высоту и добавьте padding: 60px - вы также можете сохранить свою фактическую ширину: width: calc(100px - 60px)
Я закрыл очередной раз одними и теми же дубликатами, потому что все они имеют дело с вашей проблемой и содержат ваш ответ, пожалуйста, внимательно прочтите их все, и у вас будет много способов вертикального выравнивания текста (одна строка или несколько строк)
Ответы 1
.sideBarList li {
width: 100px;
height: fill;
margin: 0;
text-align: center;
line-height: 30px;
border-radius: 10px;
background: pink;
margin: 0 10px 100px 30px;
display: inline-block;
vertical-align: baseline;
color: black;
position: relative;
text-align: middle;
font-family: Arial;
font-size: 11px;
} <ul class = "sideBarList">
<li class = "li">CDE RTR</li>
<li class = "li">ABC</li>
<li class = "li"> TYTYT YTYYT IIIOO TYTYYTYY RTRTRTR</li>
</ul> Вы имеете в виду, что он всегда в коробке? Потому что по центру уже нет? Используйте height: fill, если хотите, чтобы коробка подходила, иначе не могли бы вы объяснить свою цель немного подробнее?
Вы хотите, чтобы текст также был выровнен по вертикали? Это уже выровненный центр