创造垂直和横向＆＃39;删除线＆＃39;

Question

我正在尝试创建一个＆＃39; spacer＆＃39;在我的网站上的按钮之间，并希望它是单词或垂直线，在单词的上方和下方居中。我试过了

HTML

<div class="footer-btn-wrap">
    <div class="decor"><a href="... </div>

    <div class="or">
       <div class="above"></div>
       <h4>or</h4>
       <div class="below"></div>
    </div>

    <div class="decor"><a href="... </div>
</div>  

CSS

.or { // name of containing div}
.or .above { border: 1px left solid }
.or .below { border: 1px left solid }

但无法让他们居中。

在视觉上，我试图在按钮

之间完成以下操作

其次，在移动设备中我希望线条水平通过（按钮将被堆叠，它将介于两者之间）

Answer 1

他们需要成为边界吗？你可以使用一个只有几个像素宽的div并给它一个背景色。

http://jsfiddle.net/puqgko63/

<div class="footer-btn-wrap">
    <div class="decor">
        <a href="..."></a>
    </div>

    <div class="or">
        <div class="above"></div>
        <h4>or</h4>
        <div class="below"></div>
    </div>

    <div class="or">
        <h4>or</h4>
        <div class="below"></div>
    </div>

    <div class="decor">
        <a href="..."></a>
    </div>
</div>

.footer-btn-wrap
{
    width: 120px;
    background-color: #aaccee;
    color: #abddf9;
    font-family: Calibri;
}

.or h4
{
    font-size: 24pt;
    text-decoration: none;
    display: block;
    width: 50px;
    margin: auto;
    text-align: center;
}

.or .above, .or .below
{
    height: 50px;
    width: 2px;
    background-color: #abddf9;
    margin: auto;
}

要使其为移动版本水平，您可以将元素更改为内联块，然后交换spacer div的宽度和高度。

（下面的例子仍然需要一些调整，但它应该让你知道如何做到这一点）

http://jsfiddle.net/yf6zvq7z/

.footer-btn-wrap
{
    background-color: #61b8df;
    color: #abddf9;
    font-family: Calibri;
    display: inline-block;
}

.or
{
    display:inline-block;
    height: 50px;
}

.or h4
{
    font-size: 24pt;
    text-decoration: none;
    display: inline-block;
    margin: 0 20px;

}

.or .above, .or .below
{
    display:inline-block;
    height: 2px;
    width: 50px;
    background-color: #abddf9;
    margin: auto;
    vertical-align: middle;
}

Answer 2

您可以使用伪元素。

HTML：

<div class="or">
   <h4>or</h4>
</div> 

CSS中的

：

.or { 
   padding: 10px 50px;
   display: block;
   position: relative;
}

.or:before {
   content: '';
   position: absolute;
   top: 0;
   left: 55px;
   height: 30px;
   border-left: 1px solid #000; 
}

.or:after {
   content: '';
   position: absolute;
   top: 55px;
   left: 55px;
   height: 30px;
   border-left: 1px solid #000; 
}

这是一个基本的小提琴：https://jsfiddle.net/f1u1tsjk/1/

显然，您需要根据自己的图片自定义css。

这是一篇关于如何使用伪元素的好文章：https://css-tricks.com/pseudo-element-roundup/