欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

奇葩的vertical-align属性

程序员文章站 2022-07-02 15:39:03
vertical-align是css中，垂直对齐方式的样式属性...

vertical-align是css中，垂直对齐方式的样式属性

它通常用于行内块元素与行内元素之间。

一般用于有图片或者按钮在的地方，一旦你使用了行内块元素，那么line-height属性就很难让图文或者按钮对齐了，因为它只针对文字。所以我们需要vertical-align属性。

一个忠告
vertical-align在使用时最好的结构是，将所有你需要对齐的行内块元素和行内元素放在一个块级元素中。然后给他们分别添加vertical-align: middle;

举个例子：

<style>
        div{
            width: 600px;
            height: 400px;
            background-color: #f00;
            border: 1px solid #000;
            line-height: 400px;
        }
        img{
            vertical-align: middle;
        }
        button{
            vertical-align: middle;
        }
        span{
            border: 1px solid #fff;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <img src="book08.jpg" alt=""><button>134</button><span>hello 你好</span>
    </div>
</body>

效果如下：
奇葩的vertical-align属性
PS：当然如果你只想让它们居中对齐，只要你设置了line-height，那么，你也可以不将文字放在标签中，效果一样。

若你不给父元素添加line-height: 400px;你会得到这样一个结果：
奇葩的vertical-align属性
假如同时去掉img标签和父元素的属性，如下：

<style>
        div{
            width: 600px;
            height: 400px;
            background-color: #f00;
            border: 1px solid #000;
        }
        button{
            vertical-align: middle;
        }
        span{
            border: 1px solid #fff;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <button>134</button><span>hello 你好</span>
    </div>
</body>

你会得到这样一个结果：
奇葩的vertical-align属性
当然，你也可以给文字设置 vertical-align: baseline;属性，这样你会发现文字会以底线对齐。可以和第一个案例对比一下。

<style>
        div{
            width: 600px;
            height: 400px;
            background-color: #f00;
            border: 1px solid #000;
        }
        img{
            vertical-align: middle;
        }
        button{
            vertical-align: baseline;
        }
        span{
            border: 1px solid #fff;
            vertical-align: baseline;
        }
    </style>
</head>
<body>
    <div>
        <img src="book08.jpg" alt=""><button>134</button><span>hello 你好</span>
    </div>

如图：
奇葩的vertical-align属性
题外话
现在在写前端界面的时候，我们提倡结构、样式、行为三分离。
结构，即HTML
样式，即CSS
行为，即JS
所谓三分离：
首先是形式上，HTML、CSS、JS都写在不同的文件中，CSS文件和JS文件通过src属性引入到HTML中
其次是内容上，HTML中的行内样式都用CSS属性来书写，在H5中样式标签被抛弃（对页面有强调作用的标签除外）。

总结：line-height和vertical-align是一对父子，配套使用效果最好

本文地址：https://blog.csdn.net/ttttqqqqq/article/details/107166796

上一篇： 这么多Linux版本，你究竟该怎么选择？

下一篇： 科技类、企业类网站导航

推荐阅读