文本的水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="spyu">
<title>Document</title>
<style type="text/css">
body {
background-color: white;
}
.centerClazz {
border: 3px solid green;
text-align: center;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="centerClazz">
<p>
文字居中
</p>
</div>
</body>
</html>
图片水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="spyu">
<title>Document</title>
<style type="text/css">
body {
background-color: white;
}
img {
width: 100px;
height: 100px;
display: block;
margin: 0 auto;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<p>文字居中</p>
<img src="E:\下载库\3.jpeg"/>
</body>
</html>
元素水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="spyu">
<title>Document</title>
<style type="text/css">
body {
background-color: white;
}
.centerClazz {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="centerClazz">
<p>居中元素标签div</p>
</div>
</body>
</html>
margin:auto填充规则：
(1) 如果一侧定值，一侧auto，则auto为剩余空间大小
(2) 如果两侧均是auto，则平分剩余空间
左右对齐
绝对定位右偏移0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="spyu">
<title>Document</title>
<style type="text/css">
body {
background-color: white;
}
.centerClazz {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
p {
border: 3px solid rebeccapurple;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="centerClazz">
<p>居中元素标签div</p>
</div>
</body>
</html>
使用float方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="spyu">
<title>Document</title>
<style type="text/css">
body {
background-color: white;
}
.centerClazz {
float: right;
width: 300px;
padding: 10px;
border: 3px solid gold;
}
p {
border: 3px solid rebeccapurple;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="centerClazz">
<p>居中元素标签div</p>
</div>
</body>
</html>
垂直居中
padding实现内部元素垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="spyu">
<title>Document</title>
<style type="text/css">
body {
background-color: white;
}
.centerClazz {
padding: 70px 0px 70px 0px;
border: 3px solid orange;
}
p {
border: 3px solid rebeccapurple;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="centerClazz">
<p>居中元素标签div</p>
</div>
</body>
</html>
网友评论