Html 将居中文本添加到类似 <hr/> 的行的中间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2812770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add centered text to the middle of a <hr/>-like line
提问by Brian M. Hunt
I'm wondering what options one has in xhtml 1.0 strict to create a line on both sides of text like-so:
我想知道 xhtml 1.0 中有哪些选项可以在文本的两侧创建一行，如下所示：
Section one ----------------------- Next section ----------------------- Section two
I've thought of doing some fancy things like this:
我想过做一些像这样的奇特事情：
<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section
Or alternatively, because the above has problems with alignment (both vertical and horizontal):
或者，因为上面有对齐问题（垂直和水平）：
<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>
This also has alignment problems, which I solve with this mess:
这也有对齐问题，我用这个烂摊子解决了：
<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
</tr><tr>
<td> </td>
<td> </td>
</tr></table>
In addition to the alignment problems, both options feel 'fudgy', and I'd be much obliged if you happened to have seen this before and know of an elegant solution.
除了对齐问题之外，这两个选项都让人感觉“笨拙”，如果您以前碰巧见过这个并且知道一个优雅的解决方案，我将非常感激。
采纳答案by MatTheCat
I don't know if this has been figured out but flexbox offers quite a solution:
我不知道这是否已经解决，但 flexbox 提供了一个很好的解决方案：
<div class="separator">Next section</div>
.separator {
display: flex;
align-items: center;
text-align: center;
}
.separator::before, .separator::after {
content: '';
flex: 1;
border-bottom: 1px solid #000;
}
.separator::before {
margin-right: .25em;
}
.separator::after {
margin-left: .25em;
}
See http://jsfiddle.net/MatTheCat/Laut6zyc/for demo.
有关演示，请参见http://jsfiddle.net/MatTheCat/Laut6zyc/。
Today the compatibility is not that bad(you can add all of old flexbox syntaxes) and it degrades gracefully.
今天的兼容性并没有那么糟糕（你可以添加所有旧的 flexbox 语法）并且它会优雅地降级。
回答by Fletcher Moore
How about:
怎么样：
<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
<span style="font-size: 40px; background-color: #F3F5F6; padding: 0 10px;">
Section Title <!--Padding is optional-->
</span>
</div>Check out this JSFiddle.
看看这个JSFiddle。
You can use vwor %to make it responsive.
您可以使用vw或%使其响应。
回答by MartinF
The way to solve this without knowing the width and the background color is the following:
在不知道宽度和背景颜色的情况下解决此问题的方法如下：
Structure
结构
<div class="strike">
<span>Kringle</span>
</div>
CSS
CSS
.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
}
.strike > span {
position: relative;
display: inline-block;
}
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: red;
}
.strike > span:before {
right: 100%;
margin-right: 15px;
}
.strike > span:after {
left: 100%;
margin-left: 15px;
}
Example: http://jsfiddle.net/z8Hnz/
示例：http: //jsfiddle.net/z8Hnz/
Double line
双线
To create a double line, use one of the following options:
要创建双线，请使用以下选项之一：
1) Fixed space between lines
1) 固定行间距
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
border-top: 4px double red;
Example: http://jsfiddle.net/z8Hnz/103/
示例：http: //jsfiddle.net/z8Hnz/103/
2) Custom space between lines
2) 自定义行间距
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 5px; /* space between lines */
margin-top: -2px; /* adjust vertical align */
border-top: 1px solid red;
border-bottom: 1px solid red;
}
Example: http://jsfiddle.net/z8Hnz/105/
示例：http: //jsfiddle.net/z8Hnz/105/
SASS (SCSS) version
SASS (SCSS) 版本
Based on this solution, I added SCSS "with color property" if it could help someone...
基于此解决方案，如果可以帮助某人，我添加了“具有颜色属性”的 SCSS...
//mixins.scss
@mixin bg-strike($color) {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
> span {
position: relative;
display: inline-block;
&:before,
&:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: $color;
}
&:before {
right: 100%;
margin-right: 15px;
}
&:after {
left: 100%;
margin-left: 15px;
}
}
}
example of use :
使用示例：
//content.scss
h2 {
@include bg-strike($col1);
color: $col1;
}
回答by Omniscience
You can accomplish this with ::before and ::after without knowing the width of container or background color, and to achieve greater styling of the line breaks. For example, this can be modified to make double-lines, dotted lines, etc.
您可以在不知道容器宽度或背景颜色的情况下使用 ::before 和 ::after 完成此操作，并实现更好的换行样式。例如，可以将其修改为双线、虚线等。
CSS, and HTML usage:
CSS 和 HTML 用法：
.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;
}<div class="hr-sect">CATEGORY</div>SCSS Version:
SCSS 版本：
.hr-sect {
display: flex;
flex-basis: 100%;
align-items: center;
color: rgba(0, 0, 0, 0.35);
margin: 8px 0;
&:before, &:after {
content: "";
flex-grow: 1;
background: rgba(0, 0, 0, 0.35);
height: 1px;
font-size: 0;
line-height: 0;
margin: 0 8px;
}
}
回答by Diodeus - James MacFarlane
回答by Robert Kajic
I just came across the same problem, here is one way to solve it:
我刚刚遇到了同样的问题，这是解决它的一种方法：
<table width="100%">
<tr>
<td><hr /></td>
<td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
<td><hr /></td>
</tr>
</table>?
It works without setting a background on the text element, i.e. it will look good regardless what background is behind it.
它无需在文本元素上设置背景即可工作，即无论其背后是什么背景，它都会看起来不错。
You can try it out here: http://jsfiddle.net/88vgS/
你可以在这里试试：http: //jsfiddle.net/88vgS/
回答by willoller
UPDATE:This will not work using HTML5
更新：这不适用于 HTML5
Instead, check out this question for more techniques: CSS challenge, can I do this without introducing more HTML?
相反，请查看此问题以获取更多技术：CSS 挑战，我可以在不引入更多 HTML 的情况下做到这一点吗？
I used line-height:0to create the effect in the header of my site guerilla-alumnus.com
我曾经line-height:0在我的网站guerilla-alumnus.com的标题中创建效果
<div class="description">
<span>Text</span>
</div>
.description {
border-top:1px dotted #AAAAAA;
}
.description span {
background:white none repeat scroll 0 0;
line-height:0;
padding:0.1em 1.5em;
position:relative;
}
Another good method is on http://robots.thoughtbot.com/
另一个好方法是在http://robots.thoughtbot.com/
He uses a background image and floats to achieve a cool effect
他使用背景图片和浮动来达到很酷的效果
回答by Aleksejs Mjaliks
<div style="text-align: center; border-top: 1px solid black">
<div style="display: inline-block; position: relative; top: -10px; background-color: white; padding: 0px 10px">text</div>
</div>
回答by Trey Hunner
If you can use CSS and are willing to use the deprecated alignattribute, a styled fieldset/legend will work:
如果您可以使用 CSS 并愿意使用已弃用的align属性，则样式化的字段集/图例将起作用：
<style type="text/css">
fieldset {
border-width: 1px 0 0 0;
}
</style>
<fieldset>
<legend align="center">First Section</legend>
Section 1 Stuff
</fieldset>
<fieldset>
<legend align="center">Second Section</legend>
Section 2 Stuff
</fieldset>
The intended purpose of a fieldset is to logically group form fields. As willoler pointed out, a text-align: centerstyle for will not work for legendelements. align="center"is deprecated HTML but it should center the text properly in all browsers.
字段集的预期目的是对表单字段进行逻辑分组。正如 willoler 所指出的，text-align: center样式 for 不适用于legend元素。 align="center"不推荐使用的 HTML，但它应该在所有浏览器中正确地将文本居中。
回答by dasfdsa
Bootstrap grid:
引导网格：
HTML:
HTML：
<div class="row vertical-center">
<div class="col-xs-5"><hr></div>
<div class="col-xs-2" style="color: white"> Text</div>
<div class="col-xs-5"><hr></div>
</div>
CSS:
CSS：
.vertical-center{
display: flex;
align-items: center;
}
