css图片居中
css图片水平垂直居中
·
相信很多工程师都搜索过css图片居中的方法吧,但总是出现各种各样的问题。其实css图片居中分为很多种情况
第一种:已知父元素的高度,单独设置文字水平垂直居中,我们只需要设置css样式line-hight:同父元素高度,text-align:center即可。
第二种:让图片和文字水平垂直居中
给父元素设置line-hight样式和text-align:center,给img图片设置vertical-align:middle即可让图片和文字都水平垂直居中。
.box {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
border: 1px solid #ccc;
box-sizing: border-box;
}
.pic {
width: 150px;
height: 100px;
vertical-align: middle;
}
第三种 设置图片水平垂直居中。可以设置图片为块样式,display:block,margin:0 auto。父元素设置padding值。
box {
width: 300px;
height: 300px;
padding: 100px 0;---- //(父元素的高度-图片的高度)/ 2
border: 1px solid #ccc;
box-sizing: border-box;
}
.pic {
display: block;
width: 150px;
height: 100px;
margin: 0 auto;
}
第四种方法是用绝对定位和相对定位
.box {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.pic {
position: absolute;
left: 50%;top: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 100px;
}
更多推荐
已为社区贡献3条内容
所有评论(0)