img图片在父元素中居中的方法

2023-12-18 16:35| 来源: 网络整理| 查看: 265

一般情况下，说到居中显示，最常见的办法应该就是margin：auto；、text-align：center；、line-height的设置，但是对于图片img来说，这个办法实在是不好用。文本在标签中水平垂直居中有n种办法，可是刚刚发现，图片的垂直居中是不能用行高解决的，所以该文章就是记录图片在元素中无法居中显示的问题。

该方法不仅可以解决图片居中问题，且适用于多行文本居中，那就是设置空标签。初始代码：

DOCTYPE html> Document div{ width: 500px; height: 400px; border: solid 1px red; margin: 50px auto; }

初始图中可以看到，图片默认在左上角的位置，既不水平居中也没有垂直居中。初始效果图如下：具体实现步骤：

先给父元素设置text-align:center;使得图片可以水平居中显示。给需要设置居中的元素，利用display: inline-block;转换成行内块元素，再添加垂直居中属性vertical-align: middle;此时还需要添加标尺，即参照物。也就是添加一个与img的同辈元素，一般情况下常使用span标签，其他的同辈元素也可以，但是需要注意同辈元素和img标签中间不能有任何内容、空格或者回车。最后，需要给标尺标签设置以下属性： display: inline-block; width: 0; height: 100%; vertical-align: middle;

完整代码：

DOCTYPE html> Document div{ width: 500px; height: 400px; border: solid 1px red; margin: 50px auto; text-align: center; } div img{ display: inline-block; vertical-align: middle; } div span{ display: inline-block; width: 0; height: 100%; vertical-align: middle; }

最终实现效果图：

【本文地址】

img图片在父元素中居中的方法

img图片在父元素中居中的方法

今日新闻

推荐新闻