垂直和水平對齊

我已經垂直居中div。不過，我想橫向居中另一個div。問題是我沒有設法水平居中。

（X）HTML：

<body> 
<div id="strut"></div> 
<div id="page"> 
    <div id="inner_page"> 
     <h1>Galidie "jQzz" Clément</h1> 
    </div> 
</div>

CSS：

html, body { 
margin: 0; 
padding: 0; 
height: 100%; 
} 

#strut, #page { 
    display: inline-block; 
    vertical-align: middle; 
} 

#strut { 
    height: 100%; 
} 

#page { 
    border: 1px solid #c00; 
} 

#inner_page { 
    width: 750px; 
    margin: 0 auto; 
    background-color: #c00; 
} 

h1 { 
    text-align: center; 
    margin: 0; 
}

支柱爲垂直居中的元件的標記物。頁面垂直居中。這個想法是嘗試水平居中inner_page塊。

我應該使用絕對位置嗎？還是其他什麼？我選擇了好方法嗎？

來源

2012-10-19 jQzz

#page是內聯塊，所以它將始終佔用其子級的維度。在這種情況下，其唯一的孩子是#inner_page，這是750px，所以他們都將是相同的大小。這意味着你不能將它置於#page之內。

例如，您可以通過將text-align: center置於body的中心#page本身。

來源

2012-10-19 22:58:52 kapa

謝謝！你幫了我很多！ – jQzz

垂直和水平對齊

回答

相關問題