Вертикально центральное содержимое плавающего 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%;
}