Question

我有一些真正的基本HTML＆amp; 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;
}

但是文字并没有在中间对齐。为什么不呢？

Answer 1

vertical-align属性仅适用于：

内联级和'table-cell'元素

请参阅this link。

您可以使用line-height对文本进行垂直居中，只需将其设置为大于实际font-size，但只有在文本跨越一行时才有效。

或者，您可以在padding元素的顶部和底部添加header相等的值。

根据评论编辑：如果使用HTML5 header元素，那么明显的解决方案是使其成为display: table-cell;而不是我认为重置CSS适用的默认块。

Answer 2

试试这个，对我来说非常好：

/* 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;

Answer 3

Flexbox现在可以很容易地做到这一点：

numpy.ndarray

http://codepen.io/anon/pen/waYBjv

Answer 4

vertical-align无法按照您对display:block元素的影响。例如，如果文本是元素中的唯一内容并且所有文本都停留在同一行，人们通常只使用line-height:60px。

如果那里有更多的东西，如果绝对必须并且调整边距/填充/等等，最好给容器一个高度。包含元素内的元素，直到它看起来正确。

Answer 5

vertical-align属性仅适用于内联元素。它对块级元素没有影响，比如div或者段落。如果你想将内联元素垂直对齐到中间，只需使用它。

vertical-align: middle;

点击此处了解更多信息：Understanding vertical-align, or "How (Not) To Vertically Center Content"

Answer 6

这是我最喜欢的垂直对齐它使用弹性盒的技巧，一切都应该使用弹性盒！

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>

Answer 7

如果您不想使用表格，可以使用vertical-align：middle和display：inline-block，同时使用100％高度的空内联元素：

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>

Answer 8

<div style="border:1px solid #000;height:200px;position: relative;">
     <div style="position: absolute;top: 50%;left:50%;">
     hello mahesh 
     </div>
</div>

Fiddle demo

试试这个。

CSS - vertical-align无法正常工作

8 个答案: