使元素水平居中

来源：互联网发布：存照片的软件编辑：程序博客网时间：2024/04/29 14:27

利用自动外边距来使元素居中时，可以将待居中的元素用一个容器性质的div包裹起来。在给这个div加样式的时候，除了限定自动外边距外，还要给定该div的宽度，宽度值等于待居中元素的宽度。

例如，在699#项目中，需要使日期控件与表格控件分别水平居中，代码如下：

Index.html:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<tr>

<th>任务系列号</th>

<th>工艺文件编号</th>

</tr>

</thead>

</table>

</div>

</body>

</html>

myDateTable.css:

注意：第一行的两个日期控件加上一个按钮宽度之和为：480px;第二行的表格控件的宽度为1600px.所以，盛放这两行的div的宽度分别设置为480px和1600px。

.datainp{ width:200px;height:30px;border:1px #A5D2EC solid;}

.datep{ margin-bottom:40px;line-height:24px;margin-right:15px;}

.wicon{background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAQCAYAAADj5tSrAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNi8xNS8xNGnF/oAAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAAoElEQVQ4jWPceOnNfwYqAz9dYRQ+E7UtwAaGjyUsDAyYYUgJ2HT5LXZLcEmSCnA6duOlN///////H0bDALl8dPH/////Z8FuNW6Qtvw2nL3lyjsGBgYGhlmRqnj1kGwJuqHIlhJlCXq8EOITEsdqCXLEbbr8FisfFkTo+vBZRFZwERNEFFkCiw90nxJtCalxQmzegltCzVyP1RJq5HZ8AABuNZr0628DMwAAAABJRU5ErkJggg==");background-repeat:no-repeat;background-position:right center;}

li{display:inline;}

#divDate{

width:480px;

margin-top:20px;

margin-left:auto;

margin-right:auto;

}

#divTablePaging{

width:1600px;

margin-top:20px;

margin-right:auto;

margin-left:auto;

}

效果图如下：

0 0