CSS 图片布局
🌙
手机阅读
本文目录结构
img 居中
其实上面的方法一道八变通一下，都可以实现图片的居中，这里再分享一个奇技淫巧！
.wrapper{
width: 400px;
height: 400px;
text-align: center;
border: 2px solid blue;
background-image: url('./bg.jpg');
background-repeat: no-repeat;
background-position: center;
}
就是 background-position：center
图片居中对齐
要让图片居中对齐，可以使用 margin: auto; 并将它放到 块 元素中：
img {
display: block;
margin: auto;
width: 40%;
}
图片居中
缺点：需要添加 font-size: 0; 才可以完全的垂直居中；不过需要注意 html 中#parent 包裹 img 之间需要有换行或空格；熟悉 line-height 和 vertical-align 的基友关系较难
#parent{
height: 150px;
line-height: 150px;
font-size: 0;
}
img#son{vertical-align: middle;} /*默认是基线对齐，改为middle*/
<div id="parent">
<img src="/images/xx.png" alt="" id="son">
</div>
(1) 行内 / 行内块级 / 图片
原理：text-align: center; 控制行内内容相对于块父元素水平居中，然后就是 line-height 和 vertical-align 的基友关系使其垂直居中，font-size: 0; 是为了消除近似居中的 bug
#parent{
height: 150px;
line-height: 150px; /*行高的值与height相等*/
text-align: center;
font-size: 0; /*消除幽灵空白节点的bug*/
}
#son{
/*display: inline-block;*/ /*如果是块级元素需改为行内或行内块级才生效*/
vertical-align: middle;
}
优缺点
优点：代码简单；兼容性好（ie8+） 缺点：只对行内内容有效；需要添加 font-size: 0; 才可以完全的垂直居中；不过需要注意 html 中#parent 包裹#son 之间需要有换行或空格；熟悉 line-height 和 vertical-align 的基友关系较难
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>元素水平居中</title>
<style>
/* 默认的图片 */
.d1{
width: 1200px;
border: 3px solid #333333;
/* 1.在父元素上面加上 text-align: center;*/
text-align: center;
}
/* 2.已知图片宽度的情况 */
.d2{
width: 1200px;
border: 3px solid #666666;
}
/* 在要居中的图片上添加 */
.d2 img{
position: relative;
left: 50%;
/* 负值，图片宽度的一般 */
margin-left: -50px;
}
/* 3.不知道图片宽度并且图片默认的display改为其他的*/
.d3{
width: 1200px;
border: 3px dashed #666666;
text-align: center;
}
.d3 img{
/* 修改图片的display为inline或inline-block */
display: inline-block;
}
/* 4.不知道图片的宽度，并且图片的display不为默认，或不为inline、inline-block*/
.d4{
width: 1200px;
border: 3px dashed #666666;
}
.d4 img{
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 图片水平居中 -->
<div class="d1">
<img src="eq.png"/>
</div>
<div class="d2">
<img src="eq.png"/>
</div>
<div class="d3">
<img src="eq.png"/>
</div>
<div class="d4">
<img src="eq.png"/>
</div>
</body>
</html>
