这是一个基于Flex的解决方案。

h1 { 显示:flex; flex-direction:行; ｝ h1:之前,h1:{后 内容:“”; Flex: 11; Border-bottom: 1px solid; 保证金:汽车; ｝ h1:{之前 margin-right: 10 px ｝ h1:{后 margin-left: 10 px ｝ 今天< h1 > < / h1 >

JSFiddle: https://jsfiddle.net/j0y7uaqL/

这可能有点超出了问题的范围，但我相信这确实有助于其他有类似问题的人。

如果您需要多个单元格，并且不想显式地指定背景颜色，则必须对行的每个部分使用标记。

这允许你使用一个完整的伸缩线来定位元素，例如扩展器

.title-hr { 宽度:100%; vertical-align:中间; 对齐项目:中心; text-align:开始; 显示:flex; } .title-hr >跨度{ 填料:0 0.4em; } .title-hr >。人力资源{ Border-bottom: 1px实心#777; 行高:0.1 em; 保证金:0.34em 0 0.35em; Flex: 1台自动; } .title-hr > .hr。修复{ Flex: 0 1自动; } < div class = " title-hr”> < span > + < / span > <span class="hr fix"></span> 标题< span > < / span > < span class = "人力资源部" > < / span > < / div >

h6 {
    font: 14px sans-serif;
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
}

    h6.background {
        position: relative;
        z-index: 1;
        margin-top: 0%;
        width:85%;
        margin-left:6%;
    }

        h6.background span {
            background: #fff;
            padding: 0 15px;
        }

        h6.background:before {
            border-top: 2px solid #dfdfdf;
            content: "";
            margin: 0 auto; /* this centers the line to the full width specified */
            position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
            top: 50%;
            left: 0;
            right: 0;
            bottom: 0;
            width: 95%;
            z-index: -1;
        }

这对你有帮助

好吧，这个更复杂，但它适用于所有浏览器，除了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; 
}

:before和:after元素的位置是绝对的，因此我们可以将一个元素拉到左边，一个元素拉到右边。此外，宽度(在本例中为40%)非常依赖于内部文本的宽度。我得想个解决办法。至少在顶部:1.2em可以确保即使字体大小不同，线条也或多或少地保持在文本的中心。

它似乎工作得很好:http://jsfiddle.net/tUGrf/3/

以防有人想这样做，依我看，使用CSS的最佳解决方案是使用flexbox。

这里有一个例子:

.kw-dvp-HorizonalButton { color: #0078d7; display:flex; flex-wrap:nowrap; align-items:center; } .kw-dvp-HorizonalButton:before, .kw-dvp-HorizonalButton:after { background-color: #0078d7; content: ""; display: inline-block; float:left; height:1px; } .kw-dvp-HorizonalButton:before { order:1; flex-grow:1; margin-right:8px; } .kw-dvp-HorizonalButton:after { order: 3; flex-grow: 1; margin-left: 8px; } .kw-dvp-HorizonalButton * { order: 2; } <div class="kw-dvp-HorizonalButton"> <span>hello</span> </div>

这应该总是会产生一个完美的居中对齐的内容，左边和右边有一条线，线和内容之间有一个容易控制的边缘。

它在顶部控件之前和之后创建一个线元素，并在flex容器中将它们设置为顺序1,3，同时将内容设置为顺序2(进入中间)。 将前/后的值增加为1，可以使它们平等地占用最多的空白空间，同时保持内容的中心。

希望这能有所帮助!

我不太确定，但您可以尝试使用水平规则，并将文本推到其上边距之上。你还需要一个固定宽度的段落标签和背景。这有点粗糙，我不知道它是否适用于所有浏览器，你需要根据字体大小设置负边距。虽然chrome的工作。

<style>   
 p{ margin-top:-20px; background:#fff; width:20px;}
</style>

<hr><p>def</p>