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

HTML关于居中的问题

2017-08-25 14:41 274 查看

1： margin:0 auto;方式–>设置当前层在父级层中居中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
text-align: center;
}
#box{
width: 720px;
height: 250px;
margin: 0 auto;
border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

2：定位方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 720px;
height: 250px;
position: relative;
left: 50%;
margin-left: -360px;
border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

3：水平居中

.test1 ul {
margin: 0 auto;
}

4：垂直居中

.test2 {
position: relative;
}
.test2 ul {
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
}

5：水平垂直居中

.test3 {
position: relative;
}

.test3 ul {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

6：文字居中text-align、line-height

文字在div中左右居中：

text-align:center

文字在div中垂直居中：

line-height值为外边框的高度

7：图片居中vertical-align

可设置图片

vertical-align:middle

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

标签： html css

相关文章推荐

新的分享

章节导航