自定义<hr>,图像/字符位于中心

Question

我想重新创建这个横向规则:

我有双线,但我不知道如何在中心获得某种角色或图像.我想我可以使用:before和:after,但我不知道如何在这种情况下使用它们.为了回答这个问题,我们试着让中心角色成为一个角色.我稍后会弄清楚图像/图标.

想法？这是我的代码:

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #444;
    border-bottom:1px solid #444;
    margin:25px 0px;
}

Answer 1

这是我能够制作的截图.在jsfiddle.net上查看它的实际操作.

这是CSS:

body {
  background: #454545;
}

hr {
  font-family: Arial, sans-serif; /* choose the font you like */
  text-align: center; /* horizontal centering */
  line-height: 1px; /* vertical centering */
  height: 1px; /* gap between the lines */
  font-size: 1em; /* choose font size you like */
  border-width: 1px 0; /* top and bottom borders */
  border-style: solid;
  border-color: #676767;
  margin: 20px 10px; /* 20px space above/below, 10px left/right */
  overflow: visible;

  /* ensure 1px gap between borders */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}

hr:after {
  content: "§"; /* section sign */
  color: #999;
  display: inline; /* for vertical centering and background knockout */
  background-color: #454545; /* same as background color */
  padding: 0 0.5em; /* size of background color knockout */
}

/* opera doesn't render correctly. hide section sign */
x:-o-prefocus, hr:after {
  content: "";
}

部分标志

要添加部分符号,您可以将生成的内容用于:before或:after.其余棘手的部分是水平居中,垂直居中和敲出边界.

水平居中

横向居中,只需添加简单text-align: center的hr,并确保所生成的内容display: inline.

垂直居中

垂直居中需要一点内联渲染知识.由一行文本消耗的垂直空间由下式确定line-height.即使它line-height比渲染角色的尺寸小得多,角色仍然会显示完整尺寸,但它所占用的空间由角色决定line-height.使用line-height: 1px实现垂直居中.

敲掉边界

最后,我知道的唯一方法是敲掉标志后面的边框,用另一种颜色覆盖它们.在这种情况下,我们使用与文档其余部分相同的背景颜色,因此它似乎融入.设置一个合适的background-color,然后使用左右padding来控制部分符号任一侧的空间.

边界之间的差距为1px

你还会注意到我正在设置box-sizing: content-box.这是为了确保边界之间的差距为1px.(另一种替代但相同的设置将是box-sizing: border-box; height: 3px;.)

Opera渲染bug

@cimmanon指出了一些Opera渲染错误,所以我决定优雅地降级而不显示部分符号.我认为只显示线条仍然看起来非常整洁和专业.如果你真的想在Opera中使用它,你可以使用不同的标记<div class="hr"></div>(当然更新CSS来匹配).

Answer 2

当符号不是字体时，这是我认为最灵敏、最轻量和最现代的版本。

片段

hr.hr--logo {
  border-top: solid #000 1px;
  margin: 50px 0;
}
hr.hr--logo:after {
  content: url( 'logogram.svg' );
  /* Controls the position of the logo */
  left: 50%;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
  /* Controls the whitespace around the symbol */
  padding: 20px;
  background: #fff;
}

<hr class="hr--logo">