Ребята ситуация такова:
.mytext {
width: 120px;
padding: 0px 10px;
text-align: center;
line-height: 30px;
height: 30px;
border: 1px #c6c6c6 solid;
}
.mytext2 {
margin-top:10px;
width: 120px;
padding: 0px 10px;
text-align: center;
line-height: 30px;
height: 30px;
border: 1px #c6c6c6 solid;
}
Мне необходимо, что бы в зависимости от текста который вставляется в блок изменялся параметр line-height. Более чем 2 строки текста никогда не бывает, поэтому, если текст не поместился в одну строку нужно применить line-height:18px. Как это можно сделать с помощью css? Или тут прибегать нужно к js?
Ответ
Чтобы выровнить положение текста по вертикали, необязательно менять line-height. Достаточно обернуть текст внутри блоков в другой элемент, например, p, и этому p задать display:inline-block; (и vertical-align:middle; при необходимости) и задать ему line-height сразу с учетом того, что текста будет на 2 строки:
.mytext {
width: 120px;
padding: 0px 10px;
text-align: center;
line-height: 30px;
height: 30px;
border: 1px #c6c6c6 solid;
}
.mytext2 {
margin-top: 10px;
}
.mytext>p {
display: inline-block;
line-height: 15px;
margin: 0px;
padding: 0px;
}
Тест
Тестовая информация
Комментариев нет:
Отправить комментарий