居中标签 | VGOT Blog

我们都知道及float:left; 和 float:right;，但是否想过 float:center; 呢？

看下面这段代码:

我们想让 .fpage 内的 li 的整个区域浮动居中显示，这里面的 li 数量未知，ul 的宽度也是未知。当然我们可以让给 .fpage 一个 text-align:center; 但这并不是我们的初衷，很多时候我们必须得使用浮动。
这里我们得先重温一下 position:relative; 它将依据 left, right, top, bottom 等属性在正常文档流中偏移位置。那我们可以让 ul 为position:relative;left:50%，然后再让 li 向左浮动，在让它 position:relative;right:50%（或者left:-50%），那么 li 就有了我们想要的居中浮动效果啦！

CSS：

.fpage {
    position:relative;
    width:100%;
    height:80px;
    background-color:#eee;
    text-align:center;
    overflow:hidden;
}
.fpage ul {
    float:left;
    position:relative;
    left:50%;
    list-style:none;
}
.fpage ul li {
    position:relative;
    right:50%;
    float:left;
    margin:10px;
    padding:0 10px;
    border:solid 1px #000;
    line-height:60px;
}

下载这个实例：[attach=160]

控制表格居中最常见的方式就是设置其align属性为center，而在css中是找不到align的，于是控制table父级元素的text-align属性就成了一种普遍的替代方案。

例如，可以给该table外套上一个宽度为100%的表格，该表格只包含一个td，然后设置这个td的text-align属性为center就可以了。

还可以给该table外套一个div，控制该div的text-align属性。

或者在table外加上<center>标签。

如果只是想让所有网页内容居中的话，可以在css中设置body{text-align:center;}。

但这都是替代方案，并非从根本上控制了table的对齐方式,其实利用css中的expression完全可以实现。

在css中定义一个伪类：
.myTableCenter{myalign:expression(this.align="right");}
然后在该table中引用就可以了：
<table class="myTableCenter" ......</table>

下面是完整的html演示代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>css控制表格居中演示</title>
<style type="text/css">
<!--
.table_center {
background-color: #0000ff;
border:1px solid #222222;
myalign:expression(this.align="center");
}

.table_left {
background-color: #ff0000;
border:1px solid #222222;
}

-->
</style></head>

<body>
<table width="500" border="0" cellpadding="0" cellspacing="0" class="table_center">
<tr>
<td>center</td>
</tr>
</table>
<br>
<table width="500" border="0" cellpadding="0" cellspacing="0" class="table_left">
<tr>
<td>left</td>
</tr>
</table>
</body>

CSS 内部居中浮动实现(float center)

CSS控制表格居中（使用expression）