|
改進(jìn)的方法
針對(duì)這些問(wèn)題的另一個(gè)類似的版本是讓元素依然保持垂直方向上的定位方式，但是水平方向上設(shè)置 margin 為 auto 以達(dá)到我們的目的。這樣子消除了文字在水平方向上的問(wèn)題。請(qǐng)看改進(jìn)的代碼。
CSS 代碼：
html,body{
height:100%;
margin:0;
padding:0;
}
body{
background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
text-align:center;
min-width:626px;
min-height:400px;
}
#vertical{
position:absolute;
top:50%;
margin-top:-198px;/* half main elements height*/
left:0;
width:100%;
}
#hoz {
width:624px;
margin-left:auto;
margin-right:auto;
height:394px;
border:1px solid silver;
background:#666;
overflow:auto;/* allow content to scroll inside element */
text-align:left;
}
h1 {color:#fff;margin:0;padding:0}
HTML 代碼：
<div id="vertical">
<div id="hoz">
<h1>Content goes here</h1>
</div>
</div>
你可以在 這里 看到實(shí)際的頁(yè)面效果。
這樣子達(dá)到了我們預(yù)期的一部分效果，但是在垂直方向上依然存在著問(wèn)題，你可以在下圖中看到：
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 簡(jiǎn)單的通過(guò)CSS控制垂直居中 [1] 下一頁(yè) 簡(jiǎn)單的通過(guò)CSS控制垂直居中 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 簡(jiǎn)單的通過(guò)CSS控制垂直居中 [2]
