CSS - 垂直对齐不工作

我得到了一些真的基本的HTML & CSS：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; 
}

但文本在中间没有对齐。为什么不？

来源

2011-03-26 ryyst

的vertical-align属性仅适用于：

内嵌级和 '表小区' 元素

参见this link。

您可以使用line-height垂直居中文本，只是使其大于实际的font-size，但它只有在文本跨越单行时才有效。

或者，您可以通过相同的值将padding添加到header元素的顶部和底部。

按照评论编辑：如果使用HTML5 header元素的显而易见的解决方案将使它display: table-cell;，而不是我认为重置CSS应用的默认块。

来源

2011-03-26 12:18:02 clairesuzy

虽然我会在头文件中加入更多内容（比如导航，搜索等）。我需要将文本放在单独的容器中吗？ – ryyst 2011-03-26 12:19:45

不，你不应该需要一个单独的div /容器，只需将标头均匀地放在顶部和底部 – clairesuzy 2011-03-26 12:20:57

@clairesuzy：这没有意义。想象一下，我必须在标题中使用不同大小的文本，并希望将它们排列在中间。我永远无法用填充来实现，我能吗？ – ryyst 2011-03-26 12:24:18

vertical-align属性仅适用于内联元素。它不会影响块级元素，例如div或段落。如果要将内联元素垂直对齐到中间，只需使用它。

vertical-align: middle;

来源

2011-03-26 12:13:53

vertical-align不工作，你觉得它在与display:block元素的方式。例如，人们通常只使用line-height:60px，如果文本是元素中唯一的东西，并且全部保持在同一行上。

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

来源

2011-03-26 12:15:18 Marcel

嗯，那里将有很多更在年底（导航之类的东西）的头。所以使用'line-height'是不可能的。 – ryyst 2011-03-26 12:17:00

@ryyst：查看更新的答案。 – Marcel 2011-03-26 12:22:51

我不能把'div'和'vertical-align：middle'放在'div'里面，因为'div'不是内嵌的，对吧？什么是一个好的解决方法（对于愚蠢的问题抱歉，我对HTML/CSS非常陌生）。 – ryyst 2011-03-26 12:37:58

如果你不想使用，您可以使用垂直对齐表格：同时使用一个空的内联元素与100％的高度inline-block的：

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>

来源

2012-05-05 18:45:07 brillout

中，显示

试试这个，很好地工作对我来说：

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

来源

2013-09-23 18:06:56

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

Fiddle demo

试试这个。

来源

2014-08-15 14:09:28

不幸的是，文本不在真正的中心。文本“框”的左上角现在位于中心。 – Christoph 2017-04-26 01:51:00

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

header { 
    display: flex; 
    align-items: center; 
    justify-content: center;; 
}

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

来源

2015-07-23 18:47:45

下面是垂直对齐的东西我最喜欢的把戏，它使用柔性盒，一切都应该使用柔性盒！

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>

来源

2015-07-23 18:50:21 Zargold

CSS - 垂直对齐不工作

回答

相关问题