当前位置： 移动技术网 > IT编程>网页制作>CSS > 奇葩的vertical-align属性

奇葩的vertical-align属性

2020年07月11日  | 移动技术网IT编程  | 我要评论

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>

效果如下：
在这里插入图片描述
PS：当然如果你只想让它们居中对齐，只要你设置了line-height，那么，你也可以不将文字放在标签中，效果一样。

若你不给父元素添加line-height: 400px;你会得到这样一个结果：
在这里插入图片描述
假如同时去掉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: 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>

如图：
在这里插入图片描述
题外话
现在在写前端界面的时候，我们提倡结构、样式、行为三分离。
结构，即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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网