垂直居中一张图片和多行文字在固定的盒子内

最新推荐文章于 2025-04-10 17:14:48 发布

JAVA小镇V

最新推荐文章于 2025-04-10 17:14:48 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： html css

本文链接：https://blog.youkuaiyun.com/lin74love/article/details/62887945

前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何使用CSS在高度固定的容器内实现多行文字和图片的垂直居中显示。通过line-height实现单行文字居中，结合其他CSS技巧实现多行文字和图片的垂直居中效果，并提供了在线演示链接。

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

HTML代码

<div class="middle-box">
<img src="web.png"/>
<i class="visible"></i>
</div>

CSS代码

.middle-box{height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-align: center; }
.middle-box img{vertical-align: middle; }
.visible{height: 100%; vertical-align: middle; width: 0; display: inline-block;

转载自这里

本文综述

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。
关于图片垂直居中显示，本人查阅多个网站，觉得这个方法最直接，简洁。

单行文字
可能很多人都知道如何让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。例如：

//单行文字居中显示测试，css样式为：
height:3em; line-height:3em;……

多行文字
在线演示

<!DOCTYPE html>
<html>
<head>
    <title>多行文字垂直居中的效果</title>
    <style type="text/css">
        .container{
            height:400px;
            display:table;
        }
        .container .span{
            vertical-align:middle;
            display:table-cell;
            border:1px solid #FF0099;
            background-color:#FFCCFF;
            width:760px;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="span">第一行<br>
            第二行<br>
            第三行<br>
            第二行<br>
        </span>
    </div>
</body>
</html>

垂直居中一张照片

在线演示

<!DOCTYPE html>
<html>
<head>
    <title>大小不固定图片垂直居中</title>
    <style type="text/css">
        .container{
            display:inline-block; 
            width:1.2em; 
            font-size:128px; 
            text-align:center; 
            vertical-align:middle;
        }
        .container a img{
            vertical-align:middle; 
            padding:2px; 
            border:1px solid #beceeb;
        }
    </style>
</head>
<body>
<div class="container">
<a href="###">
    <img src="./images/maps.png">
</a>
<a href="###">
    <img src="./images/launcher.png">
</a>
</div>
</body>
</html>