Высота линии в процентах не работает

Ответ 1

line-height: 100% означает 100% размера шрифта для этого элемента, а не 100% его высоты. Фактически высота строки всегда зависит от размера шрифта, а не от высоты, если в его значении не используется единица абсолютной длины (px, pt и т.д.).

Ответ 2

Я знаю, что этот вопрос старый, но я нашел, что для меня является идеальным решением.

Я добавляю этот css в div, который хочу центрировать:

div:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

Это работает каждый раз, и он чист.

Изменить: Просто для завершения, я использую scss, и у меня есть удобный mixin, который я включаю в каждого родителя, который направляет детей, я хочу иметь вертикальное центрирование:

@mixin vertical-align($align: middle) {
  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: $align;
    // you can add font-size 0 here and restore in the children to prevent
    // the inline-block white-space to mess the width of your elements
    font-size: 0;
  }
  & > * {
    vertical-align: $align;
    // although you need to know the font-size, because "inherit" is 0
    font-size: 14px;
  }
}

Полное объяснение: div:before добавит элемент внутри div, но до любого из его дочерних элементов. При использовании :before или :after мы должны использовать объявление content:, иначе ничего не произойдет, но для нашей цели контент может быть пустым. Затем мы указываем, что элемент должен быть таким же высоким, как и его родительский, при условии, что его родительская высота определена, и этот элемент является, по меньшей мере, встроенным блоком. vertical-align определяет вертикальное положение self, связанное с родителем, в отличие от text-align, которое работает по-другому.

Объявление @mixin предназначено для пользователей sass, и оно будет использоваться следующим образом:

div {
    @include vertical-align(middle)
}

Ответ 3

Когда вы используете процент в качестве высоты строки, он не основан на контейнере div, а скорее на основе размера шрифта.

Ответ 4

line-height: 100% - это простой способ вертикально центрировать элементы, если он был рассчитан по отношению к контейнеру, но это было бы слишком просто, поэтому оно не работает.

Итак, это просто еще один способ сказать line-height: 1em (right?)

Другим способом вертикального центрирования элемента будет:

.container {
     position:relative;
}
.center {
     position:absolute;
     top:0; left:0; bottom:0; right:0;
     margin: auto;
     /* for horiz left-align, try "margin: auto auto auto 0" */
}

Ответ 5

может быть не очень красивым, но он работает, и его семантика;

<div class="bar" style="display: table; text-align: center;">
    <img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

display: table-cell дает элементу уникальную абстракцию таблицы для выравнивания по вертикали (по крайней мере, я считаю ее уникальной)

Ответ 6

Это очень поздний ответ, однако в современных браузерах, предполагая, что родительский элемент также составляет 100% высоты экрана, вы можете использовать модуль vh viewport. FIDDLE

line-height: 100vh;

Поддержка браузера

Ответ 7

Вы можете установить высоту строки на основе высоты этого элемента. Если высота элемента 200px означает, что вам нужно установить высоту строки в 200px, чтобы центрировать текст.

span {
  height: 200px;
  width: 200px; 
  border: 1px solid black;
  line-height: 200px; 
  display: block;
}

<span>Im vertically center</span>

Ответ 8

Это решение работает в IE9 и выше. Сначала мы устанавливаем дочернюю верхнюю позицию на 50% (середина родителя). Затем, используя правило translate, переместите ребенка на половину его фактической высоты. Основным преимуществом является то, что нам не нужно определять дочерний рост, он рассчитывается браузером динамически. JSFiddle

.bar {
    height: 500px;
    text-align: center;
    background: green;
}
.bar img {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

Ответ 9

Более современный подход - использовать для этого flexbox, он проще и чище. Тем не менее, flexbox - это совершенно другая парадигма, чем раньше были inline-block, float или position.

Для выравнивания элементов внутри .parent вы делаете:

.parent {
  display: flex;
  align-items: center;
}

Это об этом. Дети flex родителей автоматически преобразуются в гибкие дочерние элементы.

Вы должны прочитать больше о flexbox, хорошее место для начала - это шпаргалка: https://css-tricks.com/snippets/css/a-guide-to-flexbox/