Html 用于在中间带有单词的水平线的 CSS 技术

CSS technique for a horizontal line with words in the middle

提问by Jason

I'm trying to make a horizontal rule with some text in the middle. For example:

我正在尝试使用中间的一些文本来制作水平规则。例如：

----------------------------------- my title here -----------------------------

--------------------- 我的标题在这里------------ -----------------

Is there a way to do that in CSS? Without all the "-" dashes obviously.

有没有办法在 CSS 中做到这一点？显然没有所有的“-”破折号。

回答by Darko Z

This is roughly how I'd do it: the line is created by setting a border-bottomon the containing h2then giving the h2a smaller line-height. The text is then put in a nested spanwith a non-transparent background.

这大致是我的做法：该行是通过border-bottom在包含上设置 ah2然后给出h2较小的line-height. 然后将文本放入span带有非透明背景的嵌套中。

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

I tested in Chrome only, but there's no reason it shouldn't work in other browsers.

我只在 Chrome 中进行了测试，但没有理由它不能在其他浏览器中工作。

JSFiddle: http://jsfiddle.net/7jGHS/

JSFiddle：http: //jsfiddle.net/7jGHS/

回答by Puigcerber

After trying different solutions, I have come with one valid for different text widths, any possible background and without adding extra markup.

在尝试了不同的解决方案后，我得到了一个适用于不同文本宽度、任何可能的背景并且不添加额外标记的解决方案。

h1 {
  overflow: hidden;
  text-align: center;
}

h1:before,
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
}

<h1>Heading</h1>
<h1>This is a longer heading</h1>

I tested it in IE8, IE9, Firefox and Chrome. You can check it here http://jsfiddle.net/Puigcerber/vLwDf/1/

我在 IE8、IE9、Firefox 和 Chrome 中对其进行了测试。你可以在这里查看http://jsfiddle.net/Puigcerber/vLwDf/1/

回答by Stephan Muller

Ok, this one is more complicated but it works in everything but IE<8

好的，这个更复杂，但它适用于除 IE<8 之外的所有内容

<div><span>text TEXT</span></div>

div {
    text-align: center;
    position: relative;
}
span {
    display: inline-block;    
}
span:before,
span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.2em;
}
span:after {
   right: 0;  
   left: auto; 
}

The :before and :after elements are positioned absolutely so we can pull one to the left and one to the right. Also, the width (40% in this case) is very dependent of the width of the text inside.. have to think about a solution for that. At least the top: 1.2emmakes sure the lines stay more or less in the center of the text even if you have different font size.

:before 和 :after 元素是绝对定位的，所以我们可以向左拉一个，向右拉一个。此外，宽度（在这种情况下为 40%）非常依赖于内部文本的宽度......必须为此考虑解决方案。top: 1.2em即使字体大小不同，至少可以确保线条或多或少地位于文本的中心。

It does seem to work well though: http://jsfiddle.net/tUGrf/3/

不过它似乎运行良好：http: //jsfiddle.net/tUGrf/3/

回答by Rafael

Shortest and best method:

最短和最好的方法：

span:after,
span:before{
    content:"
<span> your text </span>
a0
h1 {
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid #000;
  margin: auto;
}
h1:before {
  margin-right: 10px
}
h1:after {
  margin-left: 10px
}
a0
<h1>Today</h1>
a0
h1 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h1:before, h1:after {
  color:white;
  content:'';
  flex:1;
  border-bottom:groove 2px;
  margin:auto 0.25em;
  box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}
a0
<h1>side lines via flex</h1>
a0";
    text-decoration:line-through;
}

.hr-sect {
 display: flex;
 flex-basis: 100%;
 align-items: center;
 color: rgba(0, 0, 0, 0.35);
 margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
 content: "";
 flex-grow: 1;
 background: rgba(0, 0, 0, 0.35);
 height: 1px;
 font-size: 0px;
 line-height: 0px;
 margin: 0px 8px;
}

回答by Tsuneo Yoshioka

Here is Flex based solution.

这是基于 Flex 的解决方案。

<div class="hr-sect">Text</div>

<fieldset class="featured-header">
    <legend>Your text goes here</legend>
</fieldset>

<style>
.featured-header{
    border-bottom: none;
    border-left: none;
    border-right: none;
    text-align: center;
 }

.featured-header legend{
    -webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
    -webkit-padding-end: 8px; 
    background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
    font-weight: normal; /* I preffer the text to be regular instead of bold  */
    color: YOU_CHOOSE;
}   

</style>

JSFiddle: https://jsfiddle.net/yoshiokatsuneo/3h1fmj29/

JSFiddle：https://jsfiddle.net/yoshiokatsuneo/3h1fmj29/

回答by G-Cyrillus

for later(nowdays) browser , display:flexandd pseudo-elementsmakes it easy to draw . border-style, box-shadowand even backgroundhelps too for the makeup.

对于以后（现在）浏览器，display:flexanddpseudo-elements使绘制变得容易。border-style，box-shadow甚至background对化妆也有帮助。

/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}

<div><span>text TEXT</span></div>

div { 
  height: 1px; 
  border-top: 1px solid black; 
  text-align: center; 
  position: relative; 
}
span { 
  position: relative; 
  top: -.7em; 
  background: white; 
  display: inline-block; 
}

回答by Sujal Patel

<div class="group">
    <div class="item line"></div>
    <div class="item text">This is a test</div>
    <div class="item line"></div>
</div>

.group { display: table; width: 100%; }
.item { display: table-cell; }
.text { white-space: nowrap; width: 1%; padding: 0 10px; }
.line { border-bottom: 1px solid #000; position: relative; top: -.5em; }

回答by legnaleama

I've been looking around for some solutions for this simple decoration and I've found quite a few ones, some weird, some even with JS to calculate the height of the font and bla,bla,bla, then I've read the one on this post and read a comment from thirtydotspeaking about fieldsetand legendand I thought that was it.

我一直在寻找这个简单装饰的一些解决方案，我发现了很多解决方案，有些很奇怪，有些甚至使用 JS 来计算字体和 bla,bla,bla 的高度，然后我阅读了一个对这个职位和读取评论thirtydot谈论 fieldset和legend我认为这是它。

I'm overriding those 2 elements styles, I guess you could copy the W3C standards for them and include it on your .middle-line-textclass (or whatever you want to call it) but this is what I did:

我覆盖了这 2 个元素样式，我想您可以为它们复制 W3C 标准并将其包含在您的.middle-line-text类中（或您想调用的任何内容），但这就是我所做的：

##代码##

Here's the fiddle: http://jsfiddle.net/legnaleama/3t7wjpa2/

这是小提琴：http: //jsfiddle.net/legnaleama/3t7wjpa2/

I've played with the border styles and it also works in Android ;) (Tested on kitkat 4.XX)

我玩过边框样式，它也适用于 Android ;)（在 kitkat 4.XX 上测试）

EDIT:

编辑：

Following Bekerov Artur's idea which is a nice option too, I've changed the .png base64 image to create the stroke with an .SVG so you can render in any resolution and also change the colour of the element without any other software involved :)

遵循 Bekerov Artur 的想法，这也是一个不错的选择，我更改了 .png base64 图像以使用 .SVG 创建笔触，这样您就可以以任何分辨率渲染并更改元素的颜色，而无需涉及任何其他软件:)

##代码##

回答by Stephan Muller

##代码##

Give the span a padding to make more space between the text and the line.

给 span 一个填充以在文本和行之间留出更多空间。

Example: http://jsfiddle.net/tUGrf/

示例：http: //jsfiddle.net/tUGrf/

回答by Mike McLin

Solution for IE8 and newer...

IE8及更新版本的解决方案...

Issues worth noting:

值得注意的问题：

Using background-colorto mask a border might not be the best solution. If you have a complex (or unknown) background color (or image), masking will ultimately fail. Also, if you resize the text, you'll notice that white background color (or whatever you set) will start covering up the text on the line above (or below).

使用background-color遮罩边框可能不是最佳解决方案。如果您有复杂（或未知）的背景颜色（或图像），遮罩最终将失败。此外，如果您调整文本大小，您会注意到白色背景颜色（或您设置的任何颜色）将开始覆盖上面（或下面）行上的文本。

You also don't want to "guesstimate"how wide the the sections are either, because it makes the styles very inflexible and almost impossible to implement on a responsive site where the width of the content is changing.

您也不想“猜测”这些部分的宽度，因为它使样式非常不灵活，并且几乎不可能在内容宽度发生变化的响应式网站上实现。

Solution:

解决方案：

(View JSFiddle)

(查看JSFiddle)

Instead of "masking" a border with a background-color, use your displayproperty.

background-color使用您的display属性，而不是“屏蔽”边框。

HTML

HTML

##代码##

CSS

CSS

##代码##

Resize your text by placing your font-sizeproperty on the .groupelement.

通过将您的font-size属性放在.group元素上来调整文本大小。

Limitations:

限制：

• No multi-line text. Single lines only.
• HTML markup isn't as elegant
• topproperty on .lineelement needs to be half of line-height. So, if you have a line-heightof 1.5em, then the topshould be -.75em. This is a limitation because it's not automated, and if you are applying these styles on elements with different line-heights, then you might need to reapply your line-heightstyle.

• 没有多行文本。仅限单行。
• HTML 标记没有那么优雅
• top.line元素上的属性需要是 的一半line-height。所以，如果你有一个line-height的1.5em，那么top应该是-.75em。这是一个限制，因为它不是自动的，如果您将这些样式应用于具有不同行高的元素，那么您可能需要重新应用您的line-height样式。

For me, these limitations outweigh the "issues" I noted at the beginning of my answer for most implementations.

对我来说，这些限制超过了我在大多数实现的答案开头提到的“问题”。