黑马程序员技术交流社区

标题: 中间文字居中，两边横线的标题写法 [打印本页]

作者: ivy_ma 时间: 2019-3-18 20:04
标题: 中间文字居中，两边横线的标题写法
本帖最后由 ivy_ma 于 2019-3-18 20:10 编辑

—————————————————— 标题 ————————————————————中间文字居中，两边横线的标题写法如下：

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>横线</title>
      <style>
            * {
                     margin: 0;
                     padding: 0;
            }
            .box {
                     /*设置2px边框来充当横线*/
                     height: 2px;
                     margin-top: 40px;
                     /*此处是为了让盒子里的文字也能水平居中*/
                     text-align: center;
                     border-top: 2px solid red;
            }
            span {
                     /*因为有了相对定位，元素转为类似行内块元素*/
                     position: relative;
                     /*让文字向上偏移*/
                     top: -10px;
                     /*文字背景与整体背景需一致*/
                     background: #fff;
                     /*用padding撑开盒子*/
                     padding: 0 20px;
                     color: red;
            }
      </style>
</head>
<body>
      <div class="box">
            <span>技术贴-我是中间文字</span>
      </div>
</body>
</html>

2019-03-18_200259.jpg (123.86 KB, 下载次数: 1)

横线.jpg (44.24 KB, 下载次数: 2)

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2