11

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

在此处输入图像描述

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

想法？这是我的代码：

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

4 回答 4

15

这是我能够制作的屏幕截图。在jsfiddle.net上查看它的实际应用。

CSS 截图

这是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 渲染错误

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

于 2013-01-09T05:23:51.143 回答
8

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

片段

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">

于 2016-10-21T05:44:19.560 回答
1

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

hr {
    ... your css ...
    background:url(path to your image) no-repeat center;
    height:15px;
}
于 2013-01-07T18:50:41.630 回答
-2

这很愚蠢，但你可以尝试用不间断的空间制作两个半角 HR，以及它们之间的图像。

<hr><img><hr>

标签之间没有间距或换行符。

于 2013-01-07T18:47:06.957 回答