Html CSS - 垂直对齐不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5442226/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - vertical-align not working
提问by ryyst
I got some reallybasic HTML & CSS:
我得到了一些非常基本的 HTML 和 CSS：
Here's the HTML:
这是 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>
Here's the CSS:
这是CSS：
header {
vertical-align: middle;
height: 60px;
background-color: #00F;
}
But the text doesn't get aligned in the middle. Why not?
但是文本不会在中间对齐。为什么不？
回答by clairesuzy
The vertical-alignproperty only applies to:
该vertical-align物业仅适用于：
inline-level and 'table-cell' elements
内联级和“表格单元格”元素
See this link.
请参阅此链接。
You could use line-heightto 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 paddingto the top and bottom of the headerelement by equal values.
或者，您可以通过相等的值添加padding到header元素的顶部和底部。
Edited as per comment: the obvious solution if using HTML5 headerelement would be to make it display: table-cell;instead of the default block which I think the reset CSS's apply.
根据评论编辑：如果使用 HTML5header元素，显而易见的解决方案是使用它display: table-cell;而不是我认为重置 CSS 应用的默认块。
回答by Zach Schneider
Flexbox can do this pretty easily now:
Flexbox 现在可以很容易地做到这一点：
header {
display: flex;
align-items: center;
justify-content: center;;
}
回答by Mahendra Liya
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;
回答by Zargold
Here's my favorite trick for vertical aligning things it uses flex box, everything should use flex box!
这是我最喜欢的使用 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>回答by Marcel
vertical-aligndoesn't work the way you think it does in elements with display:block. People usually just use, for example, line-height:60pxif the text is the only thing in the element and all stays on the same line.
vertical-align不像你认为的那样在带有display:block. 例如，人们通常只使用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.
如果那里有更多的东西，如果你绝对必须并调整边距/填充/等，那么给容器一个高度可能会更好。包含元素内的元素，直到它看起来正确。
回答by sgokhales
The vertical-alignattribute is for inline elements only. 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.
该vertical-align属性仅适用于内联元素。它不会影响块级元素，例如 div 或段落。如果您想将内联元素垂直对齐到中间，只需使用它。
vertical-align: middle;
Check out more here : Understanding vertical-align, or "How (Not) To Vertically Center Content"
在此处查看更多信息：了解垂直对齐或“如何（不）垂直居中内容”
回答by brillout
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% 高度的空内联元素：
<!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>
回答by Mahesh Cheliya
<div style="border:1px solid #000;height:200px;position: relative;">
<div style="position: absolute;top: 50%;left:50%;">
hello mahesh
</div>
</div>
Try this.
尝试这个。
