简单方便实现img在div内垂直居中
想要将img在div内实现垂直居中的话可以使用display：table-cell；+ vertical-align：middle；就可以了。如果使用父元素行高的话，实现的垂直居中会导致img的底部在容器的中线上而已，如下：正确的做法如下：<!DOCTYPE html><html><head><ti
·
想要将img在div内实现垂直居中的话可以使用display：table-cell；+ vertical-align：middle；就可以了。如果使用父元素行高的话，实现的垂直居中会导致img的底部在容器的中线上而已，如下：
正确的做法如下：
<!DOCTYPE html>
<html>
<head>
<title>img垂直居中</title>
<style type="text/css">
.d1 {
width: 500px;
height: 500px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
.img1 {
width: 200px;
}
</style>
</head>
<body>
<div class="d1">
<img class="img1" src="../images/001.jpg">
</div>
</body>
</html>
当然方法不止一种，有很多譬如使用定位的方式、外边距的方式，不过我本人还是觉得这个方法会使代码显得更加的简洁一点。
如果我们是要使文本实现垂直居中的话，就可以更简单的使用行高的方法来使得文本在容器内实现垂直居中。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
1
0- 0
已为社区贡献4条内容
所有评论(0)