網頁樣式表
CSS的提示與竅門

居中文檔

一個CSS通常的目的是用其來居中文稿和圖片. 實際上, 有三種居中的類型:

• 居中文稿中的字句
• 居中文本塊或圖片
• 垂直居中文本塊或圖片

居中文稿中的字句

在段落或者標題中的文稿內居中字句是最常見和(因此)最簡單的. CSS對此有” text-align”的功能.

 
P { text-align: center }
H2 { text-align: center }

表示在P中或者在H2中每一行都是在邊距內居中排列的, 就像這樣:

居中文本塊或圖片

有時侯並不是文稿需要居中排列, 而是文本塊作爲一個整體. 或者, 用不同的方式表達: 我們要求左右的邊距是對等的. 這樣做的方法就是把邊距設定爲'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 }
...
<IMG class="displayed" src="..." alt="...">

垂直居中

CSS level 2 不具備垂直居中文檔的能力.在CSS level 3可能會具備這種功能.但是即使在CSS2內也可以通過結合一些特性來垂直居中文段. 訣竅是把週邊版塊具體指定格式化爲單元表格格式,因爲單元表格格式可以被垂直居中.

下面的例子是在一個指定高度的文段中居中其中的一個段落.  另外一個例子 則是指出一個段落之所以可以在瀏覽器窗口中垂直居中, 是因爲它是在一個已經完全被定位和與窗口有同樣高度的文段內.

 
DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>