网页样式表
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>