您的位置：首页 > Web前端 > HTML

关于html中自动居中的一些小知识

2017-03-30 18:08 686 查看

自动居中代码：margin：0 auto;

在使用自动居中时不可设置浮动、定位，否则自动居中将不能使用。

<!DOCTYPE HTML>

<html>

<head>

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

<title>几米简介</title>

<style type="text/css">

*{margin:0; padding:0; font-size:12px; color:#346667; font-family:Arial, Helvetica, sans-serif,"宋体";}

a{text-decoration:none;}

a:hover{text-decoration:underline;}

h2{line-height:30px; font-size:14px; margin-bottom:5px;}

p{line-height:24px; text-indent:26px; margin-bottom:5px;}

#wrap{width:770px margin:10px auto; //自动居中，上下外边距为10px

}

#header{width:762px; border:4px solid #badbdb; background:url(../images/banner.gif) no-repeat; height:92px; text-align:right; color:#fff;}

#header a{color:#fff; margin:0 5px;}

#mainbody,#footer{

width:100% height:200px;

}

#footer{text-align:center; padding:20px 0;}

.content{background:#eff9f9;

padding:44px 15px 15px;

border:4px solid #badbdb;}

.profile{background:url(../images/t_profile.gif) no-repeat #eff9f9;}

.book{background:url(../images/t_book.gif) no-repeat #eff9f9;}

.book img{

border:1px solid #b1adaa;

margin:10px 18px;}

</style>

</head>

<body>

<div id="wrap">

<div id="header"><a href="#">联系我们</a>|<a href="#">站点地图</a></div>

<div id="mainbody">

<div class="content profile">

<h2></h2>

<p></p>

</div>

<div class="content book"> </div>

</div>

<div id="footer"></div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航