CSS中如何把三列长度不一样的内容剧中对齐

html-css020

CSS中如何把三列长度不一样的内容剧中对齐,第1张

1.这三个div的css都设置上margin:0 auto

2.然后,在他们外面加个div框住他们,外面这个div的css设上text-aling:center

只写margin:0 auto在ie下没用的,ie下靠的是text-align:center

下面我将提供五种解决方案,有三个方案没有使用任何hack,且IE6,IE7,Firefox,chrome浏览器下表现都很好的,有一种方案使用了一个IE hack,但成本较低,各个浏览器表现良好。还有一种方案,代码成本很低,但在chrome浏览器下文字稍微偏上,使用input类型选择器,或chrome hack可以解决这个问题,但是对于单复选框这类控件,代码一多反而不划算,权衡之下,不针对chrome浏览器单独处理。

这些方案都是我经过平时积累,反复试验得出的结论,其兼容性值得信赖。要使用的话就给单复选框命名一个class,该class样式为下面方案提供的css样式即可。

以vertical-align:text-bottom为基础的

css代码如下:vertical-align:text-bottommargin-bottom:2px*margin-bottom:-2px

css代码如下:vertical-align:text-bottommargin-bottom:2pxmargin-bottom:-2px\9

以vertical-align:text-top为基础的

css代码如下:height:13pxvertical-align:text-topmargin-top:0

以vertical-align:bottom为基础的

css代码如下:height:15pxvertical-align:bottommargin-bottom:3pxmargin-top:-1px

以vertical-align:top为基础的

css代码如下:height:14pxvertical-align:top

以vertical-align:middle为基础的

css代码如下:vertical-align:middlemargin-top:-2pxmargin-bottom:1px

最后:个人比较喜欢第5种的解决方法

<table border="2px">

<tr style="text-align:right">

<th width="100px">111</th>

<th width="100px">222</th>

<th width="100px">333</th>

</tr>

<tr>

<td width="100px">444</td>

<td width="100px">555</td>

<td width="100px">666</td>

</tr>

</table>