CSS вертикально вертикально элемент не переносится

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

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

Код здесь в случае, если 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 для дочернего элемента. Это (возможно) ближе к тому, чего я хочу достичь, но не совсем так:

в соответствии

1 ответ

Решение

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 Смотрите больше здесь и здесь.

Другие вопросы по тегам