CSS - выравнивание по вертикали не работает

У меня есть действительно базовый HTML и CSS:

Здесь HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" media="all" href="stylesheet.css">
        <title>Hello, World!</title>
    </head>
    <body>
        <header>
            Hello<sup>World</sup>
        </header>
    </body>
</html>

Здесь CSS:

header {
    vertical-align: middle;
    height: 60px;
    background-color: #00F;
}

Но текст не выравнивается по середине. Почему бы и нет?

Ответы

Ответ 1

Свойство vertical-align применяется только к:

элементы inline-уровня и "table-cell"

Смотрите эту ссылку.

Вы можете использовать line-height для вертикального центрирования текста, просто сделайте его больше, чем фактический font-size, однако он эффективен если текст охватывает одну строку.

В качестве альтернативы вы можете добавить padding в верхнюю и нижнюю часть элемента header равными значениями.

Отредактировано в соответствии с комментарием: очевидное решение, если использовать элемент HTML5 header, состоит в том, чтобы сделать его display: table-cell; вместо блока по умолчанию, который, как мне кажется, применим к CSS reset.

Ответ 2

Попробуй, мне очень хорошо работать:

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

Ответ 3

Flexbox может сделать это довольно легко:

header {
     display: flex;
     align-items: center;
     justify-content: center;;
}

http://codepen.io/anon/pen/waYBjv

Ответ 4

vertical-align работает не так, как вы думаете, в элементах с display:block. Обычно люди используют, например, line-height:60px, если текст является единственным элементом в элементе и все остается в одной строке.

Если в нем будет больше вещей, возможно, лучше дать контейнеру высоту, если вы абсолютно должны и подберете маржу/дополнение/и т.д. элементов внутри содержащего элемента, пока он не будет выглядеть правильно.

Ответ 5

Атрибут vertical-align предназначен только для встроенных элементов. Он не будет влиять на элементы уровня блока, такие как div или абзац. Если вы хотите вертикально выровнять встроенный элемент в середине, просто используйте это.

vertical-align: middle;

Подробнее здесь: Понимание вертикального выравнивания или "Как (не) для вертикального центра содержимого"

Ответ 6

Вот мой любимый трюк для вертикального выравнивания вещей, в котором он использует флешку, все должно использовать гибкую коробку!

header {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    border: black solid 0.1rem;
    height: 200px; <!--Insert any height -->
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" media="all" href="stylesheet.css">
        <title>Hello, World!</title>
    </head>
    <body>
        <header>
            Hello<sup>World</sup>
        </header>
    </body>
</html>

Ответ 7

Если вы не хотите использовать таблицу, вы можете использовать вертикальное выравнивание: средний и отображаемый: встроенный блок, используя пустой встроенный элемент со 100% высотой:

http://jsfiddle.net/ycugZ/

<!DOCTYPE><html><body> <!-- Author: brillout.com -->

<div style='height: 300px;border: 1px solid black;text-align:center'>
  <div class='i'>vertical-align + inline-block<br>trick<br>in action</div>
  <div class='i' style='height:100%;width:0px'></div>
</div>
<style> div.i{ display: inline-block; vertical-align: middle } </style>

</body></html>

Ответ 8

<div style="border:1px solid #000;height:200px;position: relative;">
     <div style="position: absolute;top: 50%;left:50%;">
     hello mahesh 
     </div>
</div>

Скриншот демо

Попробуйте это.