一列固定宽度居中

最新推荐文章于 2021-06-23 01:11:15 发布

codeshark

最新推荐文章于 2021-06-23 01:11:15 发布

阅读量1.1k

点赞数

分类专栏： Div+CSS 文章标签： xhtml 浏览器 div html web

本文链接：https://blog.csdn.net/codeshark/article/details/2626741

版权

Div+CSS 专栏收录该内容

14 篇文章

订阅专栏

说明一：页面居中是常用的网页设计表现形式之一，传统的表格式布局中，用align="center"属性来实现表格居中显示。但是div本身也支持align="center"属性，同样可以实现居中，但是WEB标准化时代，这个不是我们想要的结果。因为不能实现表现与内容的分离。align对齐属性是一种样式代码，书写在div属性中，有违于分离原则。

说明二：margin属性用于控制对象的上、右、下、左四个方向的外边距。当margin用2个参数时，第一个参数表示上下边距，第二个参数表示左右边距，其中有个auto值表示让浏览器自动判断边距。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>1列固定宽度居中</title>

<style type="text/css">

#layout{background-color:#cccccc;border:2px solid #333333;width:300px;height:300px;margin:0px auto;}

/*这里设置margin:0px auto，此时浏览器会把div的左右边距设置为相等的值，然后呈现出居中状态。*/

</style>

</head>

<body>

<div id="layout"></div>

</body>

</html>