it-swarm.com.ru

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

20
Pavel S.

Остальные правы, вам нужно вложить два элемента 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's also horizontally
    centered for added joy.</p>
</div>

12
Systembolaget

Добавьте текст внутри <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;
}
​
6
Henrik Ammer

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

line-height:100px;

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

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

6
maxisam

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

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;
}

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

2
Spongman

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

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

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

1
PhazingAzrael

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

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

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