图片和文字同时居中

问题描述

如图所示，要使得一个图片和一行文字水平和垂直方向同时居中。

水平居中

水平居中的问题很简单。因为图片是一个内联元素。所有内联元素都可以看成是一行文字来排列。

所以设置 text-align:center 即可实现图片和文字同时水平居中。

垂直居中

对于单行文字的垂直居中，我们想到 line-height = height 即可解决。

因此我们对父元素进行属性设置，使其line-height = height 。

果然实现了文字垂直居中，但是图片却没有垂直居中。

为什么？

后来查资料发现对于每一个行内元素，自身都有一个属性 vertical-align ，影响其自身在所在行的排列方式。

那么一个行内元素在行内的排列方式有什么决定呢？

自身对齐方式（即 vertical-align 属性） + 所在行基线。

比如说对行内元素默认的 vertical-align 属性值是 baseline 即此行内元素的基线与所在行的基线在同一条直线上。

因此也不难想象为什么上图图片的问题了。

所以只要将图片的vertical-align属性修改为 middle 属性即可对齐。

标签：居中,文字,vertical,align,元素,height,属性,图片
来源： https://www.cnblogs.com/zxdongcopyright/p/css-vertical-align.html