css-行内块/行内元素与文字垂直居中对齐

零OO

于 2021-08-24 14:20:48 发布

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/qq_39111074/article/details/119888970

前端专栏收录该内容

229 篇文章

订阅专栏

本文详细介绍了CSS vertical-align属性在行内块元素及文字对齐中的应用，展示了不同对齐方式（如baseline、bottom、middle和top）的效果，并通过代码示例演示了如何实现图片与文字的垂直居中对齐。

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

css属性vertical-align:
可以定义行内块元素或者行内元素和文字的对齐方式，

常用于图片/表单和文字垂直居中对齐

注意：vertical-align对块级元素无效

vertical-align：baseline; - - -基线对齐（不写默认是基线对齐）
vertical-align：bottom; - - -底线对齐
vertical-align：middle; - - -中线对齐
vertical-align：top; - - -顶线对齐

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vertical-align</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            vertical-align: baseline;
            /* vertical-align: bottom; */
            /* vertical-align: middle; */
            /* vertical-align: top; */
        }
    </style>
</head>

<body>
    <img src="images/pic.jpg" alt="">what are you think about?
</body>

</html>