vertical-align和text-align的理解

. . . . .

已于 2023-03-18 14:31:23 修改

阅读量1.4k

点赞数 2

分类专栏：前端开发文章标签： html css html5

于 2021-09-12 15:38:13 首次发布

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/120250919

版权

前端开发专栏收录该内容

344 篇文章

订阅专栏

vertical-align 和 text-align 都是作用在父元素上

一. vertical-align

vertical-align的两种常用的用法：

针对inline和inline-block元素，通过在该元素上设置vertical-align，来改变自身的对齐方式。

注意： 一个元素看不出效果，必须设置不同大小的元素才能体现出来，并且以大的元素作为参考；

<!DOCTYPE html>
<html>
    <header>
        <style>
            .bg span{
                background-color: lightgreen;
            }
            .span2 {
                font-size: 30px;
            }
            .span3 {
                vertical-align: bottom;
            }
        </style>
    </header>
    <body>
        <div class="bg">
            <span class="span2">发的说法</span>
            <span class="span3">你好</span>
        </div>
    </body>
</html>

在这里插入图片描述

设置垂直居中。通过在父元素上设置display: tabel-cell和vertical-align来使子元素垂直居中。

<!DOCTYPE html>
<html>
    <header>
        <style>
            .bg {
                background-color: lightblue;
                border: black solid 1px;
                height: 300px;
                display: table-cell;
                vertical-align: middle;
            }
            .bg span{
                background-color: lightgreen;
            }
            .span2 {
                font-size: 30px;
            }
            .span3 {
                vertical-align: bottom;
            }
        </style>
    </header>
    <body>
        <div class="bg">
            <span class="span2">发的说法</span>
            <span class="span3">你好</span>
        </div>
    </body>
</html>

在这里插入图片描述

二. text-align

通过在父元素上设置text-align来使子元素水平居中。

<!DOCTYPE html>
<html>
    <header>
        <style>
            .bg {
                background-color: lightblue;
                border: black solid 1px;
                height: 300px;
                width: 1000px;
                display: table-cell;
                text-align: center;
                vertical-align: middle;
                
            }
            .bg span{
                background-color: lightgreen;
            }
            .span2 {
                font-size: 30px;
            }
            .span3 {
                vertical-align: bottom;
            }
        </style>
    </header>
    <body>
        <div class="bg">
            <span class="span2">发的说法</span>
            <span class="span3">你好</span>
        </div>
    </body>
</html>

在这里插入图片描述

关于display: table-cell 补充: 我所知道的几种display:table-cell的应用

display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。

我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。