前面说的DIV居中的问题，描述的不清楚！
以下是我的猜想：
DIV相对于父级水平居中，可以使用margin-left:automargin-right:auto
以下是例子：
<html><head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
</head>
<body style="background-color:#F00 margin:0px">
<div style="margin-left:auto margin-right:auto background-color:#000 width:950px height:500px">
</div>
</body>
</html>
然后是DIV相对于DIV上下左右的间距：
在日常布局中DIV相对于DIV的位置分为，同级和子级：
子级：一般只需要给出2个边距即可，上（下）、左（右）；
例子：
<html><head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
</head>
<body style="background-color:#F00 margin:0px">
<div style="margin-left:auto margin-right:auto background-color:#000 width:950px height:500px vertical-align:middle">
<div style="margin-left:50px margin-top:50px background-color:#FFF width:600px height:300px position:absolute text-align:center">
我是黑色DIV的子级；我距离黑色DIV顶部50px、左边50px；
</div>
</div>
</body>
</html>
第三个，小弟也才疏学浅，边框是用背景颜色出来的
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>
无标题文档
</title>
<style>
.aaa:hover{ background-color:#000}
</style>
</head>
<body style="background-color:#F00 margin:0px">
<div style="margin-left:auto margin-right:auto background-color:#000 width:950px height:500px vertical-align:middle">
<div style="margin-left:20px margin-top:50px background-color:#FFF width:900px height:300px position:absolute text-align:center">
<div style="margin-top:25px ">
<ul style="list-style:none">
<li style="float:left">
<a class="aaa" style="display:block width:198px height:248px border:0px solid #000 float:left ">
<img style="background-color:#FFF width:196px height:200px margin-top:1px"
src="http://s1.bdstatic.com/r/www/cache/eggs/nyear2014/img/default.jpg">
<span style="display:block background-color:#FFF width:196pxheight:45px position:absolute margin-left:1px border-top:1px solid #999 ">
</span>
</a>
</li>
<li style="float:left margin-left:20px">
<a class="aaa" style="display:block width:198px height:248px border:0px solid #000 float:left ">
<img style="background-color:#FFF width:196px height:200px margin-top:1px"
src="http://s1.bdstatic.com/r/www/cache/eggs/nyear2014/img/default.jpg">
<span style="display:block background-color:#FFF width:196pxheight:45px position:absolute margin-left:1px border-top:1px solid #999 ">
文字说明
</span>
</a>
</li>
<li style="float:left margin-left:20px">
<a class="aaa" style="display:block width:198px height:248px border:0px solid #000 float:left ">
<img style="background-color:#FFF width:196px height:200px margin-top:1px"
src="http://s1.bdstatic.com/r/www/cache/eggs/nyear2014/img/default.jpg">
<span style="display:block background-color:#FFF width:196pxheight:45px position:absolute margin-left:1px border-top:1px solid #999 ">
文字说明
</span>
</a>
</li>
<li style="float:left margin-left:20px">
<a class="aaa" style="display:block width:198px height:248px border:0px solid #000 float:left ">
<img style="background-color:#FFF width:196px height:200px margin-top:1px"
src="http://s1.bdstatic.com/r/www/cache/eggs/nyear2014/img/default.jpg">
<span style="display:block background-color:#FFF width:196pxheight:45px position:absolute margin-left:1px border-top:1px solid #999 ">
文字说明
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
css样式居中body{text-align:center}只想某个div居中而其他不居中body *{text-align:left}
不想写css样式，可以在<body align:center>
css样式，外边距margin:上(单位:像素px)，左，右，下
css样式内边距padding : in:上(单位:像素px)，左，右，下
因为网页中，所有对象都是块状的，所以有外边距与内边距
具体，需要自己去实际 *** 作
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）