Question

我试图移动整个边界＆＃34; up＆＃34;所以底部边框与文本的中间对齐。与this question非常相似，但我想保留左右边框（它们也必须向上推）。原因是文本与上面的信息有关。

我的jsfiddle很近但左/右边界不够高。所以我想要这样的东西：

|--------Info above is Important!--------|

（但左/右边框的底部不会泄漏到水平边框之外）

Answer 1

使用:before伪元素来绘制水平线。

＆＃13;

h5 {
  width: 100%;
  text-align: center;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  margin: 10px 0 20px;
  position: relative;
}
h5:before, h5:after {
  content: '';
  position: absolute;
}
h5:before {
  top: 50%;
  background: #000;
  height: 1px;
  left: 0; right: 0;
}
h5:after {
  background: #fff;
  top: calc(50% + 1px);
  bottom: 0;
  left: -1px; right: -1px;
}
span {
  background: #FFF;
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

＆＃13;

<h5><span>Refer to Info above</span></h5>

＆＃13;

Answer 2

我想你想要这个：

＆＃13;

h5 {
  position: relative;
  text-align: center;
   border-left: 1px solid #000;
  border-right: 1px solid #000;
}

h5 span {
  background: white;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}

h5:before {
  background: black;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
    top: 50%;
  width: 100%;
}

h5:before {
  left: 0;
}

＆＃13;

<h5><span>Refer to Info above</span></h5>

＆＃13;

我创建了一条侧线，我使用了左右边框，这是你想要的吗？

Answer 3

h5 span:before, h5 span:after {
  display:inline-block;
  content: "";
  vertical-align: bottom;
  height: .5em;
  border-top: 1px solid #000;
  width: 200px;
}

<h5><span>Refer to Info above</span></h5>

其他方式这样做:)但是使用给定宽度的行

用于水平线的CSS技术，中间的单词加上垂直边框

3 个答案: