内联元素垂直居中方法汇总-原创手记-慕课网

1. 让 line-height 与 height 相等

.container {    width: 1rem;    height: 1rem;    line-height: 1rem;    font-size: 0.12rem;    color: green;    background: lightblue;
}

这种方法并不是绝对的居中, 会有几像素的偏差. 张鑫旭大神说这是由于字体不同而引起的, 另外和字体大小也有关系

2. 用 Flex 布局实现垂直+水平居中 (推荐)

.container {    width: 1rem;    height: 1rem;    font-size: 0.12rem;    color: green;    background: lightblue;    
    display: flex;    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */}

知识点补充

我们来看一个简单的小图标对齐的例子

假设有一个 display 值为 inline-block 的尺寸为 20*20 像素的小图标. 默认状态下, 文字是明显偏下的, 如图1所示

webp

图1

这里我们需要的是垂直居中对齐效果, 所以很多人都使用具有强烈语义的 vertical-align: middle; 来控制图标的垂直位置. 然而由于 middle 并不是真正意义上的垂直居中, 因此还是会有像素级别的误差, 误差大小与字体和字号均有关
如图2所示, 图标往下多偏移了1像素而导致容器的可视高度变为21像素

webp

图2

但是如果我们使用精确的数值, 则一切尽在掌握之中
例如, 设置 vertical-align: -5px;, 此时图标和文字实现了真正意义上的垂直居中, 此时容器的可视高度和当前行高20像素保持了一致, 如图3所示

webp

图3

代码如下

html

<p>请选择<i class="icon-arrow"></i></p><p>请选择<i class="icon-arrow valign-1"></i></p><p>请选择<i class="icon-arrow valign-2"></i></p>

.icon-arrow {    display: inline-block;    width: 20px; height: 20px;    background: url(arrow.png);
}.valign-1 {    vertical-align: middle;
}.valign-2 {    vertical-align: -5px;
}

作者：小贤笔记
链接：https://www.jianshu.com/p/271fc19110ec