立即致電查詢!
電話: 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;
	}

我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗我垂直置中了﹗

 


原文網址:
https://www.aveego.com/html/o_36339_0_/如何利用css做到垂直置中.html
原文作者︰

更多網頁設計新聞

我們的客戶

我們的客戶