文本与图（标）对齐设置

目录

一、引言

二、基线的概念

三、 行高的概念

四、水平垂直居中的常用方法

---

一、引言

文字段落中插有 Tag 标签或者图标 icon，即使图标与文字等高，但会出现图片与文字垂直方向上不对齐的情况如下

不对齐时：

解决办法：

verticalAlign: 'text-bottom'

对齐后：

二、基线的概念

        如下图，文字默认是基线 baseline 对齐，而图片是已底线 descent 作为默认对齐；从而会出现引言中的问题。

通过设置 vartical-align，可以很好的解决上述问题。通常 vertical-align属性的取值有三种情况：关键字、百分比和负值。

1. 关键字

• top （顶部对齐）
• middle （中部对齐）
• baseline（基线对齐）
• bottom（底部对齐）

2. 百分比是相对于当前元素所继承的 line-height 属性值决定的，元素相对于基线向上偏移 line-height * 百分比。

3. 负值表示的是元素相对于基线向下偏移多少距离，此方法常用于解决单选框或复选框与文字垂直对齐问题。

三、 行高的概念

（1）line-height的概念：

• line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；
• 如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；
• 一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
• 把 line-height 值设置为 height 一样大小的值可以实现单行文字的 垂直居中 ；
• line-height 和 height 都能撑开一个高度；

（2）line-height 的赋值方式：

• 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
• 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
• 百分比：将计算后的值传递给后代

四、水平垂直居中的常用方法

1. 利用绝对定位，先将元素的左上角通过 top:50% 和 left:50% 定位到页面的中心，然后再通过transform: translate(-50%,-50%) 来调整元素的中心点到页面的中心；若盒子宽高固定，可用margin 负盒子宽高一半进行调整。

2. 若盒子宽高固定，利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，此时各方向实现平分，从而实现水平和垂直方向上的居中。 

3. 使用flex布局，通过  justify-content : center 和  align-items : center 设置父容器的水平、垂直方向居中对齐，然后它的子元素也可以实现垂直和水平的居中。