Вертикально центральное содержимое плавающего div

Как я по-настоящему сосредоточить содержимое плавающего div (какой высоты я не знаю)?

Существует очень простой HTML и CSS (см. эту скрипту: http://jsfiddle.net/DeH6E/1/)

<div class="floating">
    This should be in the middle
</div>

.floating {
    height: 100px;
    float: left;
    border: 1px solid red;
    vertical-align: middle;
}

Как сделать предложение "Это должно быть посередине", кажется, действительно посередине (с вертикальной ориентацией)? vertical-align: middle, похоже, не работает. Я пробовал display: table-cell, и он тоже не работал. Какой лучший способ решить эту проблему? Я хотел бы избежать вставки каких-либо других тегов HTML, сделать это просто через CSS.

(Просто, чтобы понять: я не знаю фактическую высоту контейнера, 100px просто для примера)

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

Ответы

Ответ 1

Другие правы, вам нужно вложить два элемента DOM, что дает вам больше возможностей для управления центрированием. Здесь код:

.floating {
  display: table;
  float: right;
  height: 200px;
  width: 400px;
  border: 1px solid red;
}
.floating p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;
}

<div class="floating">
    <p>This is the proper way that validates and breaks across multiple
    lines, if the text is longer than just a few words and still
    should be vertically centered. Here, it also horizontally
    centered for added joy.</p>
</div>

Ответ 2

Добавьте текст внутри <p>.

HTML

<div class="floating">
    <p>This should be in the middle</p>
</div>

CSS

.floating {
    height: 100px;
    border: 1px solid #f00;
    display: table-cell;
    vertical-align: middle;
}

Ответ 3

Если вы знаете высоту, то

line-height:100px;

Если нет, используйте javascript для установки высоты строки после рендеринга.

http://jsfiddle.net/DeH6E/4/

Ответ 4

Я также искал решение этого и в конечном итоге придумал следующее:

http://jsfiddle.net/w6j9mgjp/1/

.floating {
    height: 100px;
    float: left;
    border: 1px solid red;
}

.floating::before {
    content: "a";
    display: block;
    visibility: hidden;
    height: 50%;
    margin-top: -.7em;
}

он работает только для одной строки текста.

Ответ 5

http://jsfiddle.net/DeH6E/2/

текст внутри вашего div должен находиться в собственном теге div, и этот тег div должен быть установлен для отображения: table-cell; и выравнивание по вертикали: среднее; в то время как ваш .floating div должен быть установлен как display: table;

или вы можете установить тэг p или какой-либо другой вид тега форматирования, чтобы он содержал ваш текст, например span или p

Ответ 6

Просто играйте с псевдоселектором.

.floating {
    height: 100px;
    float: left;
    border: 1px solid red;
}

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