css - 自定义 ，中间有图像/字符

Question

我想重新创建这条水平线:

我有双线，但我不确定如何在中心获得某种字符或图像。我在想我也许可以使用 :before 和 :after，但我不知道如何在这种情况下使用它们。为了回答这个问题，让我们试着让中心 Angular 色成为一个 Angular 色。我稍后会找出图像/图标。

想法？这是我的代码行:

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: "";
}

节标

添加 section sign , 你可以使用 generated 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 渲染错误

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