css分割线文字居中的7种实现方式

2024-05-01 23:54•css•阅读 4843

最近开始研究前端，会不定期更新一些小块代码，写下自己的学习笔记，也希望能和大家一起进步！

1.单个标签实现分隔线：

<html>
<head >
    <meta charset="UTF-8">
    <title></title>
    <style>
        .line_01{
            width: 180px;
            padding: 0 20px 0;
            margin: 20px 0;
            line-height: 1px;
            border-left: 200px solid #ddd;
            border-right: 200px solid #ddd;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="line_01">小小分隔线 单标签实现</div>
</body>
</html>

优点：代码简洁

2.巧用背景色实现分隔线：

<html>
<head >
    <meta charset="UTF-8">
    <title></title>
    <style>
        .line_02{
            height: 1px;
            border-top: 1px solid #ddd;
            text-align: center;
        }
        .line_02 span{
            position: relative;
            top: -8px;
            background: #fff;
            padding: 0 20px;
        }
    </style>
</head>
<body>
<div class="line_02"><span>小小分隔线 巧用色实现</span></div>
</body>
</html>

　　

优点：代码简洁，可自适应宽度

3.inline-block实现分隔线：

<html>
<head >
    <meta charset="UTF-8">
    <title></title>
    <style>
        .line_03{
            width:600px;
        }
        .line_03 b{
            background: #ddd;
            margin-top: 4px;
            display: inline-block;
            width: 180px;
            height: 1px;
            _overflow: hidden;
            vertical-align: middle;
        }
        .line_03 span{
            display: inline-block;
            vertical-align: middle;
            padding: 0px 20px;
        }
    </style>
</head>
<body>
<div class="line_03"><b></b><span>小小分隔线 inline-block实现</span><b></b></div>
</body>
</html>

　　

优点：文字可多行

4.浮动实现分隔线：

<html>
<head >
    <meta charset="UTF-8">
    <title></title>
    <style>
        .line_04{
            width:600px;
        }
        .line_04{
            overflow: hidden;
            _zoom: 1;
        }
        .line_04 b{
            background: #ddd;
            margin-top: 8px;
            float: left;
            width: 26%;
            height: 1px;
            _overflow: hidden;
        }
        .line_04 span{
            float: left;
            padding: 0px 20px;
        }
    </style>
</head>
<body>
<div class="line_04"><b></b><span>小小分隔线 浮动来实现</span><b></b></div>
</body>
</html>

　

5.hr实现分割线

<html>
<head >
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hr-more {
            height: 20px;
            width: 70px;
            position: relative;
            left: 46%;
            top: -18px;
            font: normal 1.2em/20px 微软雅黑;
            vertical-align: middle;
            text-align: center;
            border-radius: 4px;
            background-color: #ffffff;
        }
        .div-box{
            width: 600px;
        }
    </style>
</head>
<body>
<div class="div-box">
    <hr/>
    <div class="hr-more">更多</div>
</div>
</body>
</html>

　　

6.fieldset 实现分割线

<html>
<head >
    <meta charset="UTF-8">
    <title></title>
    <style>
        fieldset {
            border:none;border-top:1px solid blue;
        }

        legend {
            width: 120px;
            text-align: center;
        }
    </style>
</head>
<body>
<fieldset>
    <legend>fieldset分割线</legend>
</fieldset>
</body>
</html>

　　

7.after伪类实现分割线

<html>
<head >
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hot {
            width: 100%;
            height: 20px;
            text-align: center;
            color: #000;
            font-size: 12px;
            line-height: 20px;
            position: relative;
        }

        .hot:after {
            content: "";
            width: 100%;
            height: 1px;
            background-color: #c5c0c0;
            position: absolute;
            bottom: 50%;
            z-index: 1;
            left: 0;
        }

        .hot span {
            z-index: 2;
            position: relative;
            background-color: #ffffff;
            padding: 0 10px;
        }
    </style>
</head>
<body>
<div class="hot">
    <span>伪类实现分割线</span>
</div>
</body>
</html>

　　

上一篇 »京东官网
下一篇 »linux配置tomcat日志分割