將div內的文字垂直對齊百分比高度和寬度？

我知道如何在div中垂直對齊文本，但是我不確定如果div有百分比的高度和寬度，如何做到這一點。這裏是我的代碼：將div內的文字垂直對齊百分比高度和寬度？

<div id="header"> 
     <h1>Home</h1> 
    </div> 

    #header { 
     background-color: red; 
     color: white; 
     text-align: center; 
     vertical-align: middle; 
     width: 100%; 
     height: 15%; 
    }

現在在我的網頁在div文本已正確水平而不是垂直對齊。我該如何解決這個問題？你也可以嘗試解釋你的答案，並儘可能簡單地保持它們（我在HTML/CSS上還是比較新的）。謝謝。

來源

2014-08-28 Pancake_Senpai

您可能會使用'flexbox'來更改該答案的正確答案。目前的答案並不能解決問題。 – lin 2017-02-03 12:09:40

先給display:inline-block您h1標籤。

DEMO

來源

2014-08-28 10:18:44 karan3112

非常感謝！這條線意味着什麼？ – 2014-08-28 10:29:37

這意味着h1的邊距不會與#header div和body的邊距合攏。就這樣。它與垂直對齊無關。看看，試着設置'＃header'的高度來說，200px。 – Alohci 2014-08-28 10:49:10

這根本不起作用 - 我修改了punker http://jsfiddle.net/4be9cp23/269/ – lin 2017-02-03 11:50:51

添加line-height匹配容器的height：

#header { 
    background-color: red; 
    color: white; 
    text-align: center; 
    vertical-align: middle; 
    width: 100%; 
    height: 15%; 
    line-height: 0.15em; 
}

來源

2014-08-28 10:17:57

線高作爲百分比是字體大小的百分比，而不是容器高度的百分比。 – Alohci 2014-08-28 10:31:33

@Alohci是的，更新。 :) – 2014-08-28 10:32:15

您可以再補充：

display:inline-block

你的H1

例如：http://jsfiddle.net/24pwprvf/

來源

2014-08-28 10:20:09

可以使用flexbox model輕鬆中心的事情。

只需添加以下規則，您的容器：

display:flex; 
justify-content: center; //horizontal centering 
align-items:center; //vertical centering

FIDDLE

注意這可能比你預期的更廣泛的解決方案，但什麼是真正酷的flexbox的是，它的工作原理在許多不同的情況下，包括你的（例如h1標記here）。

來源

2014-08-28 10:20:39

很好的解決方案！請記住，這在舊瀏覽器上工作http://www.w3schools.com/cssref/css3_pr_justify-content.asp http://www.w3schools.com/cssref/css3_pr_align-items.asp – lin 2017-02-03 11:52:22

您可以使用display:table：

#header { 
    background-color: red; 
    color: white; 
    text-align: center; 
    vertical-align: middle; 
    width: 100%; 
    height: 15%; 
    display: table;/*Add display:table*/ 
}

fiddle

參考

顯示：表告訴顯示爲一個表的元素。嵌套0元素應顯示爲錶行和表單元格，模仿好老紅素和TDS

。

來源

2014-08-28 10:22:49

您不應該使用行高作爲Praveen Above建議的效果。

通過將'display：inline-block'放入#header div或#header h1 css風格中，您可以獲得相同的效果。

第一部分是不可取的。最佳實踐將只用於h1風格。

來源

2014-08-28 10:57:07 praveen200s

將div內的文字垂直對齊百分比高度和寬度？

回答

相關問題