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 - 垂直對齊不工作

回答

相關問題