Центрировать тег H1 внутри DIV

У меня есть следующий 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.

Ответы

Ответ 1

Вы можете добавить 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

Ответ 2

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

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

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

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

Ответ 3

В теге hX

width: 100px;
margin-left: auto;
margin-right: auto;

Ответ 4

<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/

Ответ 5

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

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

Ответ 6

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

#AlertDiv h1 {
  padding:15px 18px;
}

Ответ 7

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

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

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