Ответы:
Используйте line-height:50px;
вместо высоты. Это должно делать свое дело ;)
Имейте в виду, что line-height
подход потерпит неудачу, если у вас есть длинное предложение, span
которое разрывает строку, потому что не хватает места. В этом случае у вас будет две строки с пропуском с высотой N пикселей, указанной в свойстве.
Я застрял в нем, когда хотел показать изображение с вертикально центрированным текстом на правой стороне, которое работает в адаптивном веб-приложении. В качестве основы я использую подход, предложенный Эриком Никусом и Фелипе Тадео.
Если вы хотите добиться:
и это:
.container {
background: url( "https://i.imgur.com/tAlPtC4.jpg" ) no-repeat;
display: inline-block;
background-size: 40px 40px; /* image's size */
height: 40px; /* image's height */
padding-left: 50px; /* image's width plus 10 px (margin between text and image) */
}
.container span {
height: 40px; /* image's height */
display: table-cell;
vertical-align: middle;
}
<span class="container">
<span>This is a centered sentence next to an image</span>
</span>
Это самый простой способ сделать это, если вам нужно несколько строк. Оберните span
текст в другое span
и укажите его высоту с помощью line-height
. Хитрость в несколько линий сброса внутренних span
«сек line-height
.
<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>
.textvalignmiddle {
line-height: /*set height*/;
}
.textvalignmiddle > span {
display: inline-block;
vertical-align: middle;
line-height: 1em; /*set line height back to normal*/
}
Конечно, внешний span
может быть div
или что вы сказали
span
s, как и любой другой встроенный элемент, может содержать любой встроенный элемент HTML . Несмотря на это, я написал, что это textvalignmiddle
может быть, div
если это необходимо (и вы можете установить его, display:inline;
если вы так не хотите использовать spans
)
span
является универсальным встроенным контейнером для html и не является намеком только на то, чтобы быть текстом; `Может использоваться для группировки элементов в целях стилизации ...`. Я предлагаю прочитать спецификацию, прежде чем выдвигать ваши личные стандарты кодирования на тех, кто
Путь flexbox:
.foo {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
.foo
как промежуток display: flex-inline
будет соответствовать лучше
Мне это нужно было для ссылок, поэтому я обернул span тегом a и div, затем центрировал сам тег span
HTML
<div>
<a class="tester" href="#">
<span>Home</span>
</a>
</div>
CSS
.tester{
display: inline-block;
width: 9em;
height: 3em;
text-align: center;
}
.tester>span{
position: relative;
top: 25%;
}
CSS вертикальный центр изображения и текста
У меня есть Создать одну демонстрацию для вертикального центра изображения и текста, а также у меня есть тест на Firefox, Chrome, Safari, Internet Explorer 9 и 8 тоже.
Это очень короткий и простой CSS и HTML, пожалуйста, проверьте код ниже, и вы можете найти вывод на скриншоте.
HTML
<div class="frame">
<img src="capabilities_icon1.png" alt="" />
</div>
CSS
.frame {
height: 160px;
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
.frame::before {
display: inline-block;
height: 100%;
vertical-align: middle;
content:"";
}
img {
background: #3A6F9A;
vertical-align: middle;
}
Атрибут css с вертикальным выравниванием, к сожалению, не соответствует ожиданиям. Эта статья объясняет 2 способа вертикального выравнивания элемента с помощью CSS.
Установите для padding-top подходящее значение, чтобы нажать x вниз, затем вычтите значение, которое вы имеете для padding-top, из высоты.