HTML图片文字混合实现垂直居中

最新推荐文章于 2024-06-23 16:20:36 发布

上海好程序员

最新推荐文章于 2024-06-23 16:20:36 发布

阅读量1.2w

点赞数 1

分类专栏：成长的程序员文章标签： HTML 垂直居中

本文链接：https://blog.csdn.net/fromfire2/article/details/79228872

版权

成长的程序员专栏收录该内容

80 篇文章 0 订阅

订阅专栏

效果如图：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML示例-垂直居中</title>
    <style type="text/css">
        .valign-middle-container {
            display: table-cell;
            vertical-align: middle;
        }

            .valign-middle-container img {
                vertical-align: middle;
            }

        .align-center-container {
            text-align: center;
        }

        #demo {
            width: 50%;
            height: 500px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div id="demo" class="valign-middle-container align-center-container">
        垂直居中
        <img src="https://i-blog.csdnimg.cn/blog_migrate/1c0f50efb422e8baf8ec8289832ab58b.gif" />
        <span>垂直居中</span>
        <img src="https://i-blog.csdnimg.cn/blog_migrate/1c0f50efb422e8baf8ec8289832ab58b.gif" />
        <span>垂直居中</span>
        <img src="https://i-blog.csdnimg.cn/blog_migrate/1c0f50efb422e8baf8ec8289832ab58b.gif" />
        <span>垂直居中</span>
        <img src="https://i-blog.csdnimg.cn/blog_migrate/1c0f50efb422e8baf8ec8289832ab58b.gif" />
        垂直居中
    </div>
</body>
</html>

附件：

上海好程序员

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML图片文字混合实现垂直居中

效果如图：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML示例-...
复制链接

扫一扫