立即致電查詢!
電話: 3590-9591
如何利用CSS做到垂直置中
傳統上HTML支援垂直置中的技倆不多，但網頁設計卻經常要用到，在CSS裡要做到垂直置中就有以下的小技巧了。
在表格(Table)中的vertical-align
在表格裡使用vertical-align的結果是最容易被理解的，就是把表格欄的內容垂直放在欄中，這就是很久以前HTML裡的valign=”middle”（退休了的標準，不要用了﹗）
利用line-height
先把Container設定固定高度，再把有關的元件line-height設定相同高度。
#ContainerA {
height: 80px;
background-color: #CCCCCC;
border: solid 1px #000000;
padding: 0;
margin: 0;
}
#ContainerA p {
line-height: 80px;
margin: 0;
padding: 0;
}
我垂直置中了﹗
Container沒有固定高度？乾脆設定padding就可以了﹗
#ContainerB {
background-color: #CCCCCC;
border: solid 1px #000000;
padding: 30px 10px;
margin: 0;
}
#ContainerB p {
margin: 0;
padding: 0;
}
我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗
原文網址:
http://www.aveego.com/html/o_36339_/如何利用css做到垂直置中.html
原文作者︰
Jeff Chan
更多網頁設計新聞