文本在DIV中垂直居中显示

最新推荐文章于 2025-03-24 08:01:42 发布

原创最新推荐文章于 2025-03-24 08:01:42 发布 · 351 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css

收录于

这篇博客探讨了如何在HTML的DIV元素中使文本垂直居中。内容包括一张带有黑色边框的图片以清晰展示结构，以及相关代码示例，详细介绍了两种不同的实现方法。

1 图片

为了看清楚结构，加了黑色边框
在这里插入图片描述

2 代码

*{
    background-attachment: fixed;
}
img{
    float: left;
    width:30px;
    height: 30px;
    overflow: hidden;
    padding:10px;
    border:1px solid #000;
}
.all-wraper{
    display: inline-block;
    background-color: #fff;
    border:1px solid #000;
}
.div1,.div2,.div3,.div4{
    float: left;
    height: 50px;
    margin: 10px;
    border:1px solid #000;
}
.textdiv1,.textdiv2,.textdiv3,.textdiv4{
    display: table-cell;  
    width:80px;
    height:30px;
    padding:10px 0;
    vertical-align:middle;
    text-align: center;
    border:1px solid #000;
}

html

<body>
    <div class="all-wraper">
        <div class='div1'>
            <img src='./1.jpg' />
            <div class='textdiv1'>见识类</div>
        </div>
        <div class='div2'>
            <img src='./1.jpg' />
            <div class='textdiv2'>学生价</div>
        </div>
        <div class='div3'>
            <img src='./1.jpg' />
            <div class="textdiv3">至数据</div>
        </div>
        <div class='div4'>
            <img src='./1.jpg' />
            <div class="textdiv4">数据流</div>
        </div>
    </div>
</body>