我有一些非常基本的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;
}
但是文本并没有在中间对齐.为什么不？
cla*_*uzy 50
该vertical-align酒店仅适用于:
内联级和"表格单元"元素
看到这个链接.
您可以使用line-height垂直居中的文本,只是使其大于实际font-size,但只有文本跨越一行才有效.
或者,您可以通过相等的值添加元素padding的顶部和底部header.
根据评论编辑:显而易见的解决方案,如果使用HTML5 header元素将使它display: table-cell;而不是我认为重置CSS适用的默认块.
Mah*_*iya 11
试试这个,对我来说非常好:
/* 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;
小智 11
Flexbox现在可以很容易地做到这一点:
header {
display: flex;
align-items: center;
justify-content: center;;
}
http://codepen.io/anon/pen/waYBjv
这是我最喜欢的使用 flex box 垂直对齐东西的技巧，一切都应该使用 flex box！
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>| 归档时间： |
|
| 查看次数： |
62673 次 |
| 最近记录： |