CSS - 利用 vertical-align:middle 垂直居中元素容器

前言

以前总是以为 vertical-aligntext-align 是同样的道理,一个是垂直居中,一个是水平居中。

vertical - align

vertical-align 属性设置元素的垂直对齐方式,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐,允许指定负长度值和百分比值。

这会使元素降低而不是升高,在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

【第一种用法】: 先看后面一句“在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解,如果给一个表格的 td 加一个 vertical-align:middle 的样式,表格里面的内容会垂直居中,同样的如果给一个 vertical-align:bottom 就会底部对齐,如果给一个 vertical-align:top 就会顶部对齐。

【第二种用法】: 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。假设有两个行内元素 a 和 b ,a 和 b 都是 div,当 a 加了一个 vertical-align:middle 样式之后, b 的底部(基线)就会对齐 a 的中间位置,如下图:

在这里插入图片描述

如果 a 和 b 都加了一个 vertical-align:middle 样式,那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了,如下图:

在这里插入图片描述

现在我要让 class=“box” 的 div 在 class=“wrapper” 的 div 里面垂直居中,我可以在 class=“wrapper” 的 div 里面加一个 div 空标签,把它的高度设为 100%,宽度设置为 0,再给它一个 vertical-align:middle 样式,同样的给 class=“box” 的 div 一个 vertical-align:middle 样式,那么 box 就可以在 div 里面垂直居中了。

<div class="wrapper">
    <div class="box"></div>
    <div class="help"></div>
</div>
.wrapper{
   width: 500px;
   height: 500px;
   background-color: pink;
   text-align: center;
}

.box{
   width: 100px;
   height: 100px;
   background-color: deepskyblue;
   display: inline-block;
   vertical-align: middle;
   margin: 0 auto;
}

.help{
   width: 0;
   height: 100%;
   display: inline-block;
   vertical-align: middle;
}

效果:
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页