zoukankan      html  css  js  c++  java
  • css实现中间文字两边横线效果

    1. vertical-align属性实现效果:

    vertical-align 属性设置元素的垂直对齐方式。

    该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <div class="header">
        <span class="line"></span>
        <span class="text">中间文字,两边横线</span>
        <span class="line"></span>
    </div>
     
    <style>
    .header
    {
        width:400px;
        height:36px;
        line-height:36px;
        border:1px solid green;
        text-align:center;
    }
    .line
    {
        display:inline-block;
        width:100px;
        border-top:1px solid #cccccc;
        vertical-align:5px
      //看到网上有把.text设置为vertical-align:-5px的,试了一下感觉和.header设置的line-height有冲突,效果不太合适。所以将vertical-align设置到.line上了
    }
    </style>

    2. css伪类实现效果:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <div class="header">
        <div>中间文字,两边横线</div>
    </div>
     
    <style>
        .header
        {
            width:400px;
            height:36px;
            line-height: 36px;
            text-align:center;
            border:1px solid green;
            position:relative;
        }
        .header div:before,.header div:after
        {
            position:absolute;
            background:#ccc;
            content:"";
            height:1px;
            top:50%;
            width:100px;
        }
        .header div:before{left:10px;}
        .header div:after{right:10px;}
    </style>

    总结
     

    以上所述是小编给大家介绍的css实现中间文字两边横线效果 

    转自于;https://www.jb51.net/css/642211.html

  • 相关阅读:
    Photoshop基础照片美化
    通过浏览器学习前端的小技巧
    2018Github用户kamranahmedse分享的开发路线
    20个正则表达式,让你少写1,000行代码
    适合程序员学习的网站
    使用雪碧图Css Sprite精灵 | 加速网页响应速度
    HTTP 协议入门
    SVG动画制作工具 , 从此抛弃臃肿的gif
    MySQL 不用 Null 的理由
    2018年2月设计圈超实用干货大合集
  • 原文地址:https://www.cnblogs.com/Ao-min/p/13522201.html
Copyright © 2011-2022 走看看