css中vertical-align的理解及应用

最新推荐文章于 2025-05-18 09:07:05 发布

Xiao_冬

最新推荐文章于 2025-05-18 09:07:05 发布

阅读量867

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端知识(html+css) 文章标签： css vertical-align html html5 前端

本文链接：https://blog.youkuaiyun.com/qq_39966112/article/details/90573298

前端知识(html+css) 专栏收录该内容

1 篇文章

订阅专栏

博客介绍了将图片水平、垂直居中的2种前端实现方案。先介绍了vertical-align用于指定行内块或表格单元格元素的垂直对齐方式及常见用法，随后给出两种方案，还提及类似在登录、注册前加星号提示必填项的应用。

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

如下图所示布局：将图片水平、垂直居中。

提供2种实现方案

首先，了解一下vertical-align，此处参考MDN

vertical-align是用来指定行内块元素(inline-block)或表格单元格（table-cell）元素的垂直对齐方式

比较常见的4种用法：

vertical-align: top;
vertical-align: middle;
vertical-align: baseline;
vertical-align: bottom;

方案一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 50px auto;
            background-color: gray;
            text-align: center;
        }
        /*先用辅助标签span将高度撑开 */
          .box span{
              display: inline-block;
              height: 100%;
              width: 1px;
              background-color: red;
              vertical-align: middle;
          }
        /*图片垂直居中*/
          .box img{
              vertical-align: middle;
          }
    </style>
</head>
<body>
<div class="box">
    x<img src="./mz3.jpg" alt=""><span></span>
</div>
</body>
</html>

效果如下：

方案二：

前面方案加span的主要原因是撑开一个高度，其实我们可以直接用给父元素加line-height来撑开，实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            line-height: 300px;/*通过文字行高撑开300px的高度*/
            font-size: 30px;/*文字大小无所谓，这里只是方便显示x*/
            margin: 50px auto;
            background-color: gray;
            text-align: center;
        }
        .box img{
            vertical-align: middle;/*与x的中线对齐*/
        }
    </style>
</head>
<body>
    <div class="box">
        x<img src="./mz3.jpg" alt="">
    </div>
</body>
</html>

效果如下：

类似应用还有实现登录、注册时，在前面加"*"星号提示为必填项，原理类似：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        b{font-weight: normal;}
        div{
            width: 500px;
            margin: 0 auto;
            height: 50px;
            line-height: 50px;/*直接line-height'*'无法垂直居中*/
            text-align: center;
            background-color: pink;
            margin-bottom: 10px;
        }
        div span{
            color: red;
            font-weight: bolder;
            margin-right: 8px;
        }
        .box2 span{
            display: inline-block;
            height: 30px;
            line-height: 33px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="box1">
        <span>*</span>直接line-height无法实现星号垂直居中
    </div>
    <div class="box2">
        <span>*</span>你好，世界X
    </div>
</body>
</html>

效果如下：