css分割線文字居中的7種實現方式

時間 2019-11-30

標籤 css 割線文字居中實現方式欄目 CSS 简体版

原文原文鏈接

最近開始研究前端，會不按期更新一些小塊代碼，寫下本身的學習筆記，也但願能和你們一塊兒進步！html

1.單個標籤實現分隔線：

<html>
<head lang="en">
    <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 lang="en">
    <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 lang="en">
    <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>

優勢：文字可多行spa

4.浮動實現分隔線：

<html>
<head lang="en">
    <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 lang="en">
    <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 lang="en">
    <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 lang="en">
    <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>