網頁樣式表CSS的提示與竅門 | Div center
CSS:centeringthingsSeealsotheindex[1]ofalltips.居中文檔一個CSS通常的目的是用其來居中文稿和圖片.實際上,有三種居中的類型::最近執行CCS,您可以用Level3的功能去容許絕對居中定位元素:居中文稿的字句在段落或者標題中的文稿內居中字句是最常見和(因此)最簡單的。CSS對此有text-align的功能:P{text-align:center}H2{text-align:center}表示在P中或者在H2中每一行都是在邊距內居中排列的,就像這樣:在這段中的字句都是在段落的邊距內居中的,感謝CSS的"text-align"功能中的center參數.居中文字區塊或圖片有時侯並不是文稿需要居中排...
CSS: centering thingsSee also the index[1] of all tips.
居中文檔一個CSS通常的目的是用其來居中文稿和圖片. 實際上, 有三種居中的類型::
最近執行CCS,您可以用Level 3的功能去容許絕對居中定位元素:
居中文稿的字句在段落或者標題中的文稿內居中字句是最常見和(因此)最簡單的。CSS對此有text-align的功能:
P { text-align: center } H2 { text-align: center }表示在P中或者在H2中每一行都是在邊距內居中排列的, 就像這樣:
在這段中的字句都是在段落的邊距內居中的, 感謝CSS的" text-align"功能中的center參數.
居中文字區塊或圖片有時侯並不是文稿需要居中排列, 而是文字區塊作為一個整體. 或者, 用不同的方式表 達: 我們要求左右的邊距是對等的. 這樣做的方法就是把邊距設定為auto.這通常都是運用在文字區塊的固定的寬度上, 因為如果文字區塊本身是靈活的, 它就會完全的佔用所有的可用的寬度. 以下是一個例子:
P.blocktext { margin-left: auto; margin-right: auto; width: 6em } ... <P class="blocktext">This rather...這個有點窄的文字區塊中的版塊就居中了. 但注意文字區塊中的字句是沒有居中的 (他們是向左對齊的), 不像先前的例子.
這也是用來居中圖片的方法: 把它本身設定為一個版塊, 再對它施用邊距設定功能.例如:
IMG.displayed { display: block; margin-left: auto; margin-right: auto ...