Как вертикально выравнивать что-то внутри тега span?

Ответ 1

Используйте line-height:50px; вместо высоты. Это должно сделать трюк;)

Ответ 2

Помните, что подход line-height завершается с ошибкой, если у вас есть длинное предложение в span, которое разбивает строку, потому что недостаточно места. В этом случае у вас будет две строки с пробелом с высотой N пикселей, указанных в свойстве.

Я застрял в нем, когда хотел показать изображение с вертикально центрированным текстом на правой стороне, которое работает в быстродействующем веб-приложении. В качестве базы я использую подход, предложенный Эриком Никусом и Фелипе Тадео.

Если вы хотите достичь:

и это:

.container {
    background: url( "https://i.imgur.com/tAlPtC4.jpg" ) no-repeat;
    display: inline-block;
    background-size: 40px 40px; /* image size */
    height: 40px; /* image height */
    padding-left: 50px; /* image width plus 10 px (margin between text and image) */
}

.container span {
    height: 40px; /* image height */
    display: table-cell;
    vertical-align: middle;
}

<span class="container">
    <span>This is a centered sentence next to an image</span>
</span>

Ответ 3

Это самый простой способ сделать это, если вам нужно несколько строк. Оберните текст span 'd в другой 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*/
}

DEMO

Конечно, внешний span может быть div или whathaveyou.

Ответ 4

Мне нужно было это для ссылок, поэтому я завернул 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%;
}

Ответ 5

Изображение и текст в вертикальном центре 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;
    }

Выход введите описание изображения здесь

Ответ 6

это работает для меня (Keltex сказал то же самое)

.foo {
height: 50px;
...
}
.foo span{
vertical-align: middle; 
}

<span class="foo"> <span>middle!</span></span>

Ответ 7

Атрибут css с вертикальным выравниванием не делает то, что вы ожидаете, к сожалению. В этой статье объясняется два способа вертикального выравнивания элемента с помощью css.

Ответ 8

Настройте верхнюю часть верхнего слоя, чтобы присвоить значение x вниз, а затем вычтите значение, которое у вас есть для верхнего слоя с высоты.