自定义 <hr> 以图像/字符为中心答案

【问题标题】：Custom <hr> with image/character in the center自定义 <hr> 以图像/字符为中心
【发布时间】：2012-12-21 13:04:22
【问题描述】：

我想重新创建这个水平规则：

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

想法？这是我的代码：

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

【问题讨论】：

我确实尝试了几种不同的方式使用 :before 伪元素。它看起来不能用来包含像那个字形这样的信息。无论如何，它似乎都像overflow: hidden，导致:before 被完全隐藏，除非你给hr 一个足够大的高度来显示字形。
@cimmanon，在下面查看我的答案。它使用:after。

标签： css horizontal-line

【解决方案1】：

这很傻，但你可以尝试做两个半角 HR，它们之间有不间断的空间，以及它们之间的图像。

<hr><img><hr>

标签之间没有空格或换行符。

【讨论】：

【解决方案2】：

既然你已经有了一些 css，不妨给它一个背景图片和一个高度：

hr {
    ... your css ...
    background:url(path to your image) no-repeat center;
    height:15px;
}

【讨论】：

这会使图像居中，但线条位于图像的顶部和底部。我可以让双线垂直居中的图像居中吗？
在我的示例中，条形和中间的字符都是图像的一部分，基本上每次添加 hr 时都会显示整个内容
所以图像将是 ===§=== ？如何在不拉伸 § 的情况下让它填充容器的宽度？
您创建了一个宽幅图像，并确保 § 在中心。请记住，图像在背景中，而不是 <img> 标签。所以它不会拉伸
你可以做得比图片更好。该字符存在于 Unicode 中。

【解决方案3】：

这是我能够制作的屏幕截图。在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 以匹配）。

【讨论】：

不幸的是，它在 Opera 中根本不起作用。 hr 元素不允许 before/after 伪元素溢出。
感谢您指出这一点。在已知修复此 Opera 错误之前，我将优雅地降级并删除 Opera 的部分标志。
很棒的解决方案。谢谢你的帮助，克里斯。

【解决方案4】：

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

片段

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

&lt;hr class="hr--logo"&gt;

【讨论】：