Html中图片和div居中
程序员文章站
2022-04-24 22:40:42
...
1 Img居中
Img居中只需要设置父div的line-height和text-align:center属性，不需要设置img的属性。
2 Div居中
div居中需要设置父div的display: flex属性，还需要设置子div（居中的div）的margin: auto;属性。
3 源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>居中</title>
</head>
<style type="text/css">
body{
width: 100%;
}
.middle{
width: 100%;
height: 600px;
}
.my_title{
width: 100%;
font-size: 18px;
}
/* -- 1 图片居中 -- */
/* 主要图片不需要做任何处理，父div设置好即可 */
.my_img{
/* 高度不能决定 垂直居中 */
height: 500px;
/* 宽度决定 水平居中 */
width: 60%;
/* text-align决定水平居中 */
text-align: center;
/* 行高决定 垂直居中 */
line-height: 500px;
background-color: blue;
}
/* -- 2 Div居中 -- */
.my_div{
/* 宽度决定 水平居中 */
width: 60%;
/* 高度不能决定 垂直居中 */
height: 500px;
/* 决定div居中，如果水平居中可不要 */
display: flex;
background-color: blue;
}
.my_div_center{
width: 200px;
height: 200px;
background-color: red;
/* div水平和垂直居中 */
margin: auto;
/* div水平居中 */
/* margin: 0 auto; */
/* div垂直居中 */
/* margin: auto 0; */
}
</style>
<body>
<div class="middle">
<div class="my_title">图片居中</div>
<div class="my_img">
<img src="img/my_img.jpg" width="400px" height="200px" />
</div>
</div>
<div class="middle">
<div class="my_title">Div居中</div>
<div class="my_div">
<div class="my_div_center">Div</div>
</div>
</div>
</body>
</html>
下一篇： java.lang.ClassCastException: android.widget.LinearLayout$LayoutParams cannot be cast to android.wid
推荐阅读