Как я по-настоящему сосредоточить содержимое плавающего 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.