div模块边框中间添加文字（边框线在文字两边横穿文字）

最新推荐文章于 2023-01-10 17:13:34 发布

H.F_0331

最新推荐文章于 2023-01-10 17:13:34 发布

阅读量4.2k

点赞数 6

分类专栏： # CSS3 文章标签： css

本文链接：https://blog.csdn.net/weixin_45660840/article/details/113697492

版权

CSS3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍如何利用HTML和CSS创建一个带有中间文字且边框横穿文字的div模块。通过设置不同的inline-block元素，分别实现左边线、文字和右边线，从而达到预期的视觉效果。此技术常用于页面标题或者区块标识的设计中。

摘要由CSDN通过智能技术生成

div模块边框中间添加文字（边框线在文字两边横穿文字）

需求图如下：

其他三个边框可通过设置border完成，包含文字的一边可以分布实现：左边线 + 文字 + 右边线

html：

<div class="pop">
    <div class="pop_title">
        <span class="line_left"></span>
        <span class="title">控制器主网络配置</span>
        <span class="line_right"></span>
    </div>

    <div>
    .... //框内内容
    </div>
</div>

css:

.pop{
    border: 1px #bebebe solid;
    border-top-width: 0px;
}
.pop_title {
    height: 45px;
    text-align: center;
    margin-top: -13px;  //由于标题在整个pop内，所以需要设置向上位置，使标题上的线和pop的边框对齐
}
.pop_title .line_left {
    display: inline-block;
    width: 10px;
    border-top: 1px solid #ccc ;
}
.pop_title .line_right {
    display: inline-block;
    width: calc(100% - 70px);
    border-top: 1px solid #ccc ;
}
.pop_title .title{
    color: #000;
    vertical-align: middle; //此处也可根据情况设置为 百分数或px值 调整边框线在文字中部
}