inline-block垂直居中的方法

最新推荐文章于 2023-02-09 16:14:40 发布

aizhe1517

最新推荐文章于 2023-02-09 16:14:40 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/olafff/p/5103775.html

本文详细介绍了如何使用CSS的vertical-align属性实现块级元素的垂直居中，通过将块级元素转换为行内块元素，并结合before伪元素，最终达到在浏览器中始终保持垂直对齐的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vetical-align的功能是设置行内元素垂直方向上的对齐方式。

可能的值

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

可以控制图片、文字等行内元素在行内的垂直方向上的对齐方式

如何使用vetical-align使块级元素垂直居中？

以下面为例：

body{
    <div class="wrapper">
        <div class="content">some content</div>
    </div>
}

1、为父容器wrapper设置高度

html,body{
　　height:100%
}

.wrapper{
　　height:100%
}

2、使content容器变为行内元素

.content{
    display:inline-block;
}

3、利用before伪元素在content容器之前构造一个空内容的inline-block

.wrapper:before{
    content:"";
    display:inline-block;
    height:100%;
    vetical-align:middle;
}

此时，整个页面只有一行，其中有两个inline-block，让空内容行内上下对齐

4、为content容器添加vetical-align属性

.content{
    vetical-align:middle;
}

这样，块级元素在浏览器中始终都是垂直对齐的

还有诸如在html元素中添加空img属性或者显示为表格元素，均破坏了html元素的结构，在这里不做介绍。

转载于:https://www.cnblogs.com/olafff/p/5103775.html