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

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 500px;height: 400px;border: solid 1px red;margin: 50px auto;}</style>
</head>
<body><div><img src="./../img/boy.png" alt=""><span></span></div>
</body>
</html>

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

具体实现步骤：

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

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>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;}</style>
</head>
<body><div><img src="./../img/boy.png" alt=""><span></span></div>
</body>
</html>

最终实现效果图：

img图片在父元素中居中的方法相关推荐

伪元素在父元素中居中_web前端Html5开发CSS之元素五大居中方式，实用又简单！...
大家是不是对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望对迷茫的有 ...
伪元素在父元素中居中_为什么第1号元素是宇宙中最多的元素？
在地球大气中,含量最多的元素是氮和氧.在地球表面上,70%被海水覆盖,1个水分子中包含2个氢原子,这样看起来地球上的氢元素非常多.但事实上,地壳中丰度最高的元素是氧.硅.铝.铁和钙等元素,氢元素位列第 ...
伪元素在父元素中居中_人体中含量最多的元素是什么
2020-10-21 14:05:58文/董玉莹在人体内,所含元素的含量按从多到少的顺序可排列为:氧.碳.氢.氮.钙.磷.钾.硫.钠.氯.镁等,其中最多的元素是氧元素. 人体元素人体元素是指组成人 ...
伪元素在父元素中居中_魔法中的元素属性知识
在魔法中,元素非常重要,今天我们就来给大家普及一些元素相关的知识和对应. 精神 (希伯来语是Eth) 精神是第五元素.相对而言它似乎是高于其他元素的,它的性质是抽象且无法描述的.它有时被称为精华或哲学 ...
伪元素在父元素中居中_花生种植使用哪些中微量元素？
花生种植与其他作物相同,花生必需的中微量元素为钙.镁.硫.铁.锰.铜.锌.硼.钼.氯.其中花生对钙的需求量最大,且仅次于氮.钾,居第三位.钙在花生体内的流动性差,在花生植株一侧施钙,并不能改善另一侧的 ...
子盒子在父盒子中居中的方法
根据子盒子有没有宽高选一种,总有一个方案行第一种(子盒子有宽高) .father{width:400px;height:400px;position:relative;background-colo ...
图片自适应父元素大小，并左右上下居中的css方法
图片自适应父元素大小,并左右上下居中的css方法前言这种效果多见于矩形盒子里面调用不规则的图片,希望能够达到的效果.这个效果可以很简单的用css来实现,虽然已经烂熟于心,但是并未记录下来.今天看到 ...
css文字在div中,[html][css]让文字在div中居中的方法[转]
转至:http://dreamweaver.abang.com/od/divcss/a/vertical-align.htm 一.行高(line-height)法如果要垂直居中的只有一行或几个文字, ...
父元素中拖动子元素实现
结果过程鼠标点下事件的event为鼠标相对于浏览器窗口的位置信息子元素要在父元素范围内拖动,那就有一个允许拖动的范围,子元素本身有宽高,这也是拖动范围计算要考虑的首先获取mousedown的点 ...
获取子元素上面父元素中最大的z-index(z-index在chrome的兼容问题)
页面:<div id="a" style="z-index: 200; height: 200px; color: #f00; "> <div ...

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

img图片在父元素中居中的方法相关推荐

最新文章

热门文章