CSS中的垂直对齐文本
[英]vertical-align text in CSS
问题描述
I have some really basic HTML & 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>
But the text doesn't get aligned in the middle.但是文本没有在中间对齐。 Why not?为什么不？
8 个解决方案
解决方案1
65 已采纳 2011-03-26 12:18:02
The vertical-align property only applies to: vertical-align属性仅适用于：
inline-level and 'table-cell' elements
You could use line-height to vertically center the text, just make it bigger than the actual font-size , however it is only effective if the text spans a single line.您可以使用line-height将文本垂直居中，使其大于实际的font-size ，但仅当文本跨越单行时才有效。
Alternatively you could add padding to the top and bottom of the header element by equal values.或者，您可以通过相等的值向header元素的顶部和底部添加padding 。
Edited as per comment: the obvious solution if using HTML5 header element would be to make it display: table-cell;根据评论编辑：如果使用 HTML5 header元素，显而易见的解决方案是使其display: table-cell; instead of the default block which I think the reset CSS's apply.而不是我认为重置CSS适用的默认块。
解决方案2
24 2015-07-23 18:47:45
Flexbox can do this pretty easily now: Flexbox 现在可以很容易地做到这一点：
header {
display: flex;
align-items: center;
justify-content: center;;
}
http://codepen.io/anon/pen/waYBjv http://codepen.io/anon/pen/waYBjv
解决方案3
11 2013-09-23 18:06:56
Try this, work very well for me:试试这个，对我来说效果很好：
/* 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;
解决方案4
5 2015-07-23 18:50:21
Here's my favorite trick for vertical aligning things it uses flex box, everything should use 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>
解决方案5
3 2011-03-26 12:13:53
The vertical-align attribute is for inline elements only. vertical-align属性仅适用于内联元素。 It will have no effect on block level elements, like a div or a paragraph.If you would like to vertically align an inline element to the middle just use this.它对块级元素没有影响，例如 div 或段落。如果您想将内联元素垂直对齐到中间，只需使用它。
vertical-align: middle;
Check out more here : Understanding vertical-align, or "How (Not) To Vertically Center Content"在此处查看更多信息：了解垂直对齐或“如何（不）垂直居中内容”
解决方案6
3 2011-03-26 12:15:18
vertical-align doesn't work the way you think it does in elements with display:block . vertical-align的工作方式与您认为它在具有display:block的元素中的工作方式不同。 People usually just use, for example, line-height:60px if the text is the only thing in the element and all stays on the same line.人们通常只使用line-height:60px ，如果文本是元素中唯一的内容并且都保持在同一行上。
If more stuff is going in there, it's probably better to give the container a height if you absolutely must and tweak the margin/padding/etc.如果那里有更多的东西，如果你绝对必须给容器一个高度并调整边距/填充/等，可能会更好。 of elements inside the containing element until it looks right.包含元素内的元素，直到它看起来正确。
解决方案7
0 2012-05-05 18:45:07
If you don't want to use a table you can use vertical-align:middle and display:inline-block while using an empty inline element with 100% height:如果您不想使用表格，您可以使用 vertical-align:middle 和 display:inline-block，同时使用 100% 高度的空内联元素：
http://jsfiddle.net/ycugZ/ 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
0 2014-08-15 14:09:28
<div style="border:1px solid #000;height:200px;position: relative;">
<div style="position: absolute;top: 50%;left:50%;">
hello mahesh
</div>
</div>
Try this.尝试这个。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.