Центрируйте тег H1 внутри DIV - PullRequest
Новая
       15

Центрируйте тег H1 внутри DIV

36 голосов
/ 06 июня 2011

У меня есть следующий DIV внутри тега body: 

<div id="AlertDiv"><h1>Yes</h1></div>

И это их классы CSS: 

#AlertDiv {
    position:absolute;
    height: 51px;
    left: 365px;
    top: 198px;
    width: 62px;
    background-color:black;
    color:white;
}

#AlertDiv h1{
    margin:auto;
    vertical-align:middle;
}

Как выровнять H1 по вертикали и горизонтали внутри DIV?

AlertDiv будет больше, чем H1.

Ответы [ 7 ]

36 голосов
/ 06 июня 2011

Вы можете добавить line-height:51px к #AlertDiv h1, если знаете, что это будет только одна строка. Также добавьте text-align:center к #AlertDiv. 

#AlertDiv {
    top:198px;
    left:365px;
    width:62px;
    height:51px;
    color:white;
    position:absolute;
    text-align:center;
    background-color:black;
}

#AlertDiv h1 {
    margin:auto;
    line-height:51px;
    vertical-align:middle;
}

В приведенной ниже демонстрации также используются отрицательные поля, чтобы #AlertDiv центрировался по обеим осям, даже при изменении размера окна.

Демонстрация: jsfiddle.net / KaXY5

10 голосов
/ 24 января 2014

Существует новый способ использования преобразований. Примените это к элементу к центру. Он сдвигается вниз на половину высоты контейнера, а затем «корректируется» на половину высоты элемента. 

position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);

Это работает большую часть времени. У меня была проблема, когда div был в div в li. Элемент списка имел установленную высоту, а внешние div s составляли 3 столбца (основание). 2-й и 3-й столбцы div содержали изображения, и они прекрасно центрировались с помощью этой техники, однако для заголовка первого столбца требовался оберточный div с явным набором высоты.

Теперь, кто-нибудь знает, работают ли люди CSS над тем, чтобы легко выровнять вещи? Видя, что его 2014 год и даже некоторые из моих друзей регулярно пользуются Интернетом, я подумал, а не думал ли кто-нибудь, что центрирование будет еще полезной функцией стайлинга. Только нам тогда?

7 голосов
/ 24 сентября 2014

На тэге hX 

width: 100px;
margin-left: auto;
margin-right: auto;
2 голосов
/ 06 июня 2011

Начинается jsFiddle здесь .

Кажется, горизонтальное выравнивание работает с text-align : center. Все еще пытаюсь заставить вертикальное выравнивание работать; возможно, придется использовать absolute позиционирование и что-то вроде top: 50% или предварительно рассчитанное padding сверху.

2 голосов
/ 06 июня 2011

Вы можете добавить заполнение к h1: 

#AlertDiv h1 {
  padding:15px 18px;
}
2 голосов
/ 06 июня 2011 
<div id="AlertDiv" style="width:600px;height:400px;border:SOLID 1px;">
    <h1 style="width:100%;height:10%;text-align:center;position:relative;top:40%;">Yes</h1>
</div>

Вы можете попробовать код здесь:

http://htmledit.squarefree.com/

1 голос
/ 16 сентября 2014

Вы можете использовать display: table-cell, чтобы отобразить div в качестве ячейки таблицы, а затем использовать vertical-align, как вы делали бы в обычной ячейке таблицы. 

#AlertDiv {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Вы можете попробовать это здесь:http://jsfiddle.net/KaXY5/424/

...