Блог

Я центрирую элемент по вертикали, используя последний метод на этой странице. Он работает хорошо, но у него довольно большая проблема. Когда браузер слишком тонкий, чтобы элемент мог поместиться на всю ширину, вместо того, чтобы автоматически переносить слова, элемент прыгает вниз, чтобы быть ниже контейнера. Поскольку мой контейнер имеет overflow: hidden, это просто скрывает элемент.

Вот скрипка, показывающая мою проблему. (Вы можете щелкнуть и перетащить вертикальный разделитель, чтобы легко сжимать выходной фрейм, пока не появится проблема)

Код здесь на случай, если JSFiddle недоступен:

CSS:

 .outer {
    height: 300px;
    background: black;
}

.outer:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.inner {
    display: inline-block;
    vertical-align: middle;
    background: white;
}
  

HTML:

 <div class="outer">
    <div class="inner">
        test test test test test test test test test
    </div>
</div>
  

Для тех, кто любит картинки:

Хорошо:

Плохо:

Желаемый:

В моей ситуации с центрированием высота содержимого неизвестна, но известна высота родительских элементов.

Есть ли у меня способ иметь вертикальное центрирование и плавный макет? (С чистым CSS)

Спасибо,

YM

РЕДАКТИРОВАТЬ: в ответе, который теперь удален, предлагается попробовать display: inline вместо display: inline-block для дочернего элемента. Это (возможно) ближе к тому, чего я хочу достичь, но не совсем так:

HTML:

 <div id="outer">
  <div id="inner">
    <div>Some long content hereSome long content hereSome long content hereSome long content hereSome long content hereSome long content hereSome long content hereSome long content hereSome long content hereSome long content here</div>
  </div>
</div>
  

CSS:

 #outer {
    background: black;
}
#inner {
    display: table-cell;
    vertical-align: middle;
    height: 300px;
    width: 100%;
}

#inner div {
    background: white;
}
  

JSFiddle Смотрите больше здесь и здесь .