之前设计网页,如果希望div或table居中,总是用<center></center>把它包起来,但是这样的结果,div或table虽然居中了,但div或table里面的文字也居中了,这是不符合设计者意愿的。那么,我们能否用css实现div或table居中,文字不居中呢?答案是肯定的,本文将给你介绍如何实现此效果。 css实现div或table居中 文字不居中首先,介绍css的写法。 .countainer{ 这里我们要注意一个关键代码,就是 margin:auto; ,这个代码就是起到可以让div或table居中,而文字不居中的功效。 了解这个后,剩下的,就是html中div或table引用此类 .countainer 了,看看下面的实例。 div代码: <div class="countainer"> table代码: <table class="countainer"> div或table使用类写法 class="countainer" ,代码并不复杂。 最后,附上完整的html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> margin:auto 可以让所有html元素居中通过上述例子,看到 margin:auto 可以让div或table居中,其实,它可以让所有html元件居中,如:<p>、<pre>、<input>等元素。 本文实例演示及源码下载demo download 您可能对以下文章也感兴趣
|