图片垂直居中

2024-04-09 18:04:35

图片居中在很多地方需要用到，水平居中很好实现，垂直居中有点麻烦，这段时间在项目中遇到了好几处这样的问题，分享给大家。
###需求一：未知图片大小，使图片在高度固定的区域内垂直居中
大家都习惯在应该是图片垂直居中的地方先设置图片父元素的行高line-height等于其高度height，然后对图片设置vertical-align:middle来达到这种效果。首先我们先来看下这种方式的效果：

.wrapper{
	background: #cc8548;
	margin: 40px auto;
	width: 500px;
	height: 300px;
	line-height: 300px;
	text-align: center;
}
.img{
	vertical-align: middle;
}

<div class="wrapper">
		<img class="img" src="img1.jpg">
</div>

其效果如下：

是不是看着这样就垂直居中了？
其实并没有居中，只是因为上下差别太小不好看出而已，我们把父元素的高度缩小一下就很明显了：

.wrapper{
	background: #cc8548;
	margin: 40px auto;
	width: 500px;
	height: 200px;
	line-height: 200px;
	text-align: center;
}
.img{
	vertical-align: middle;
}

对于vertical-align这个属性，W3C给出的说明是：

vertical-align用来设置垂直对齐方式，所有垂直对齐的元素都会影响行高
值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit
初始值: baseline
应用于: 行内元素、替换元素、表单元格
继承性: 无
百分数: 相对于元素的行高line-height
[注意]IE7-浏览器中vertical-align的百分比值不支持小数行高，且取baseline、middle、text-bottom等值时与标准浏览器在展示效果不一样，常用的解决办法是将行内元素设置display:inline-block

vertical-align:baseline(元素的基线与父元素的基线对齐)
vertical-align:sub(降低元素的基线到父元素合适的下标位置)
vertical-align:super(升高元素的基线到父元素合适的上标位置)
vertical-align:bottom(把对齐的子元素的底端与行框底端对齐)
vertical-align:text-bottom(把元素的底端与父元素内容区域的底端对齐)
vertical-align:top(把对齐的子元素的顶端与行框顶端对齐)
vertical-align:text-top(把元素的顶端与父元素内容区域的顶端对齐)
vertical-align:middle(元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐)
vertical-align:(+-n)px(元素相对于基线上下偏移npx)
vertical-align:x%(相对于元素的line-height值)
vertical-align:inherit(从父元素继承vertical-align属性的值)

由此可见，vertical-align: middle;属性的作用并不是将子元素的垂直中点和父元素的垂直中点对齐，而是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐。
对于元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐，可参考下图：

基线并不是汉字文字的下端沿，而是英文字母“x”的下端沿。但是字符X在父元素中并不是垂直居中的，且各个字体的字符X的高低位置不一致。所以，当字体大小较大时，这种差异就更明显。而当字体大小为0时，基线的位置就等于中线的位置，我们通过设置父元素的font-size:0来使图片达到完成垂直居中的效果：

.wrapper{
	background: #cc8548;
	margin: 40px auto;
	width: 500px;
	height: 200px;
	line-height: 200px;
	text-align: center;
	font-size: 0;
}
.img{
	vertical-align: middle;
}

###需求二：图文混排，使图片在未知高度的div中垂直居中
使用场景大概是图文混排，左边是图片，右边为文字，文字多少未知，图片垂直居中。

这里使用flex布局来解决图文混排的问题，其代码如下：

.wrapper{
	background: #cc8548;
	margin: 40px auto;
	padding: 20px;
	width: 500px;
	display: flex;
	flex-direction: row;
	align-items: center; /*垂直居中*/
	justify-content: center; /*水平居中*/
	font-size: 0;
}
.img{
	vertical-align: middle;
	align-items: center;
	}
.text{
	flex: 1;
	padding-left: 50px;
	font-size: 20px;
}

<div class="wrapper">
	<img class="img" src="img1.jpg">
	<div class="text">
		富强*文明和谐，*平等公正法制，爱国敬业诚信友善。
		富强*文明和谐，*平等公正法制，爱国敬业诚信友善。
		富强*文明和谐，*平等公正法制，爱国敬业诚信友善。
		富强*文明和谐，*平等公正法制，爱国敬业诚信友善。
		富强*文明和谐，*平等公正法制，爱国敬业诚信友善。
		富强*文明和谐，*平等公正法制，爱国敬业诚信友善。
		富强*文明和谐，*平等公正法制，爱国敬业诚信友善。
		富强*文明和谐，*平等公正法制，爱国敬业诚信友善。
	</div>
</div>

over~ QAQ

码农公寓

相关文章