Flex布局结合border:left/right; 来设置文字中间分割线

今天设计给的稿件的分割线不是平常常见的那种，还给了两条垂直的线。

比如像这样：

看到这张图，第一反应用两条hr，再设置hr的border-left/right。然而这并不能实现这样的效果。

当你给hr设置高度的时候，如果不设置border:none，hr看上去变成了一个有着灰色边框的盒子。比如像这样：

hr{
            height: 15px;
            /*border:none;*/
            /*border-top:1px solid red;*/
            /*border-right: 1px solid red;*/
        }

效果如图：

注释部分取消注释后：

折腾了够久了。期间还试验了文字前面：before ：after写法~然而依旧折腾得够呛。

突然觉得，我何不弄简单点。

比如像这样：

<style>
        .box{
            width: 600px;
            display: flex;
            align-items: center;
            margin-top: 20px;
        }
        .div1, .div3{
            flex:1.4;
            border-top: 1px solid red;
        }

        .div2{
            flex:1;
            text-align: center;
            border-left: 1px solid red;
            border-right: 1px solid red;
            font-size:36px;
            line-height: 16px; 
            padding: 0 20px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="div1"></div>
    <div class="div2">我的文字</div>
    <div class="div3"></div>
</div>
</body>

 

用 Flex 大容器包裹三个盒子，属性设置 align-items: center。使得3个盒子垂直居中对齐。

再给文字设置border-left/right。

注意，这里第二个div文字部分不设置height，而是用设置line-height来达到缩短 border-left/right的高度。

得到的就是文章开头图片那样的效果。

另外一个今天折腾了一小会的是关于 line-gradient。下次再说。

posted @ 2017-06-22 09:01  kiera  阅读(4674)  评论(0)  编辑  收藏  举报