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

CSS居中总结

2015-11-08 14:40 567 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin:0;
padding:0;
text-align: center;
}
.div1{
width:200px;
height:200px;
background-color: aquamarine;
}
.div2{
width:100px;
height:100px;
background-color:red;
}
.spcenter{
margin:0 auto;     /*DIV居中*/
text-align: center;   /*文本居中*/
}
.div3{
width:400px;
height:400px;
background: url("noavatar_big.gif") center red no-repeat ;
margin:0 auto;
}
.div4{
width:300px;
height:300px;
border: 1px solid red;
line-height: 300px;
margin:0 auto;
}
.div5{
width:900px;
height:300px;
border: 1px solid red;
vertical-align: middle;
line-height: 300px;
margin:0 auto;
}
img{
vertical-align: middle;
}
ul{
list-style: none;
display: inline-block;
vertical-align: middle;
}
ul li{
float: left;
padding:5px;
}
</style>
</head>
<body>
<p>水平居中</p>
<div class="div1 spcenter">
<div class="div2 spcenter"></div>
</div>
<hr/>
<p>图片的垂直居中</p>
<div class="div3"></div>
<hr/>
<p>针对文字短的文字的垂直居中</p>
<div class="div4">
<span>这真的是文字的垂直居中</span>
</div>
<hr/>
<p>文字与图片、按钮、导航的垂直居中</p>
<div class="div5">
<span>图片与文字垂直居中</span>
<input type="text"/>
<img src="noavatar_big.gif" alt=""/>
<ul>
<li>qwe</li>
<li>wer</li>
<li>ert</li>
</ul>
</div>
</body>
</html>

代码运行如下

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

标签：

相关文章推荐

新的分享

章节导航