У меня есть действительно базовый 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;
}
Но текст не выравнивается по середине. Почему бы и нет?
Свойство vertical-align применяется только к:
элементы inline-уровня и "table-cell"
Смотрите эту ссылку.
Вы можете использовать line-height для вертикального центрирования текста, просто сделайте его больше, чем фактический font-size, однако он эффективен если текст охватывает одну строку.
В качестве альтернативы вы можете добавить padding в верхнюю и нижнюю часть элемента header равными значениями.
Отредактировано в соответствии с комментарием: очевидное решение, если использовать элемент HTML5 header, состоит в том, чтобы сделать его display: table-cell; вместо блока по умолчанию, который, как мне кажется, применим к CSS reset.
Попробуй, мне очень хорошо работать:
/* 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;
Flexbox может сделать это довольно легко:
header {
display: flex;
align-items: center;
justify-content: center;;
}
vertical-align работает не так, как вы думаете, в элементах с display:block. Обычно люди используют, например, line-height:60px, если текст является единственным элементом в элементе и все остается в одной строке.
Если в нем будет больше вещей, возможно, лучше дать контейнеру высоту, если вы абсолютно должны и подберете маржу/дополнение/и т.д. элементов внутри содержащего элемента, пока он не будет выглядеть правильно.
Атрибут vertical-align предназначен только для встроенных элементов. Он не будет влиять на элементы уровня блока, такие как div или абзац. Если вы хотите вертикально выровнять встроенный элемент в середине, просто используйте это.
vertical-align: middle;
Подробнее здесь: Понимание вертикального выравнивания или "Как (не) для вертикального центра содержимого"
Вот мой любимый трюк для вертикального выравнивания вещей, в котором он использует флешку, все должно использовать гибкую коробку!
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>Если вы не хотите использовать таблицу, вы можете использовать вертикальное выравнивание: средний и отображаемый: встроенный блок, используя пустой встроенный элемент со 100% высотой:
<!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>
<div style="border:1px solid #000;height:200px;position: relative;">
<div style="position: absolute;top: 50%;left:50%;">
hello mahesh
</div>
</div>
Попробуйте это.