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

最新推荐文章于 2022-08-30 07:01:09 发布

weixin_30670151

最新推荐文章于 2022-08-30 07:01:09 发布

阅读量1.4k

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/leeLxj/p/6181992.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>

优点：文字可多行

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>

转载于:https://www.cnblogs.com/leeLxj/p/6181992.html

weixin_30670151

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css分割线文字居中的7种实现方式

最近开始研究前端，会不定期更新一些小块代码，写下自己的学习笔记，也希望能和大家一起进步！1.单个标签实现分隔线：<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .line_...
复制链接

扫一扫