自定义< hr>与在中心的图象/字符 [英] Custom <hr> with image/character in the center

问题描述

我想重新创建此横向规则：

我有双线，但我不知道如何去在中心得到某种字符或图像。我想我可能可以使用：before和：after，但我不知道如何利用它们在这种情况下。为了回答这个问题，让我们试着让中心字符成为一个字符。我会在以后找出图片/图标。

想法？这是我的代码行：

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

解决方案

能够生产。请参阅，您可以使用生成内容与：之前或：之后。

水平居中

水平居中，垂直居中，中心就像向 hr 添加 text-align：center 并确保生成的内容 display：inline 。

垂直居中

垂直居中需要很少有内联渲染的知识。一行文本消耗的垂直空间由 line-height 确定。即使 line-height 远远小于渲染字符的大小，字符仍然显示为完整大小，但它占用的空间由 line-height 。使用 line-height：1px 实现垂直居中。

敲除边框

最后，我知道敲出分区标志后面的边界的唯一方法是用另一种颜色覆盖它们。在这种情况下，我们使用与文档其余部分相同的背景颜色，因此它似乎融合在一起。设置适当的 background-color ，然后使用左右 padding 可以控制区域符号两边的空间大小。

h2>

您还会注意到我设置了 box-sizing：content-box 。这是为了确保边框之间的间隙是1px。 （一个替代方案，但等效设置为 box-sizing：border-box; height：3px; 。）

Opera渲染错误

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

I'd like to recreate this horizontal rule:

I have the double lines, but I'm not sure how to go about getting some kind of a character or image in the center. I'm thinking I might be able to use :before and :after, but I don't know how to utilize them in this case. For the sake of answering the question, let's just try and get the center character to be a character. I'll figure out the image/icon later.

Ideas? Here's my code for the lines:

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

解决方案

Here's a screenshot of what I was able to produce. See it in action at jsfiddle.net.

And here is the 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 */

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

The section sign

To add the section sign, you can use generated content with either :before or :after. The remaining tricky parts are horizontal centering, vertical centering, and knocking out the borders.

Horizontal centering

Horizontal centering is as simple as adding text-align: center to the hr and making sure the generated content is display: inline.

Vertical centering

Vertical centering requires a little knowledge of inline rendering. The vertical space consumed by a line of text is determined by line-height. Even if the line-height is much smaller than the size of the rendered character, the character is still displayed full size, but the space it takes up is dictated by the line-height. Using line-height: 1px achieves the vertical centering.

Knocking out the borders

Finally, the only way I know of to knock out the borders behind the section sign is to cover them up with another color. In this case, we use the same background color as is on the rest of the document so it seems to blend in. Set an appropriate background-color and then use left and right padding to control how much space is to either side of the section sign.

1px gap between the borders

You'll also notice that I'm setting box-sizing: content-box. This is to ensure that the gap between the borders is 1px. (An alternative but equivalent set up would be box-sizing: border-box; height: 3px;.)

Opera rendering bug

@cimmanon pointed out some Opera rendering bugs, so I decided to degrade gracefully and not show the section sign. I think showing just the lines still looks very tidy and professional. If you really want to get this working in Opera, you could use different markup like <div class="hr"></div> (and of course update the CSS to match).

这篇关于自定义< hr>与在中心的图象/字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！