[英]vertical-align text in CSS
我有一些非常基本的 HTML 和 CSS:
header { vertical-align: middle; height: 60px; background-color: #00F; }
<!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>
但是文本没有在中间对齐。 为什么不?
vertical-align
属性仅适用于:
内联级和“表格单元”元素
请参阅 此链接。
您可以使用line-height
将文本垂直居中,使其大于实际的font-size
,但仅当文本跨越单行时才有效。
或者,您可以通过相等的值向header
元素的顶部和底部添加padding
。
根据评论编辑:如果使用 HTML5 header
元素,显而易见的解决方案是使其display: table-cell;
而不是我认为重置CSS适用的默认块。
Flexbox 现在可以很容易地做到这一点:
header {
display: flex;
align-items: center;
justify-content: center;;
}
试试这个,对我来说效果很好:
/* 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;
这是我最喜欢的垂直对齐使用弹性盒子的技巧,一切都应该使用弹性盒子!
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>
vertical-align
属性仅适用于内联元素。 它对块级元素没有影响,例如 div 或段落。如果您想将内联元素垂直对齐到中间,只需使用它。
vertical-align: middle;
在此处查看更多信息:了解垂直对齐或“如何(不)垂直居中内容”
vertical-align
的工作方式与您认为它在具有display:block
的元素中的工作方式不同。 人们通常只使用line-height:60px
,如果文本是元素中唯一的内容并且都保持在同一行上。
如果那里有更多的东西,如果你绝对必须给容器一个高度并调整边距/填充/等,可能会更好。 包含元素内的元素,直到它看起来正确。
如果您不想使用表格,您可以使用 vertical-align:middle 和 display:inline-block,同时使用 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>
尝试这个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.