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

HTML与CSS--------居中问题

2016-08-20 10:54 197 查看

居中问题

左右居中

块标签内的内容居中用 text-align:center

块标签自己居中两种方法
1.当块标签给定宽度时 用margin: 0 auto;

2.或者用相对定位:left:50%  margin-left:width/2;

行块标签上下居中

1.表格有默认内容居中的样式

2.用vertical-align:middle;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
height: 500px;
background-color: lightpink;
}
.wrap span{
display: inline-block;
height: 100%;
vertical-align: middle;
}
.wrap img{
width: 200px;
height: 100px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrap">
<span></span>
<img src="img/tfboys1.jpg"/>
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航