将居中文本添加到水平规则的中间

我想知道在xhtml 1.0中有什么选项可以严格地在文本的两侧创建一行，就像这样:

Section one
----------------------- Next section -----------------------
Section two

我想过做一些像这样的奇妙的事情:

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

或者，因为上面有对齐问题(垂直和水平):

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

这也有对齐问题，我解决了这个混乱:

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

除了对齐问题之外，这两个选项都让人感觉“糊里糊涂”，如果你之前碰巧看到过这个，并且知道一个优雅的解决方案，我将非常感激。

当前回答

在不知道宽度和背景颜色的情况下解决这个问题的方法如下:

结构

<div class="strike">
   <span>Kringle</span>
</div>

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;
}

例如:http://jsfiddle.net/z8Hnz/

双线

要创建双线，请使用以下选项之一:

1)线间距固定

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    border-top: 4px double red;

例如:http://jsfiddle.net/z8Hnz/103/

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;
}

例如:http://jsfiddle.net/z8Hnz/105/

SASS (SCSS)版本

在这个解决方案的基础上，我添加了“带颜色属性”的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;
        }
    }
}

使用示例:

//content.scss
h2 {
    @include bg-strike($col1);
    color: $col1;
}

2014-03-24 07:44:41

其他回答

如何:

看看这个JSFiddle。

您可以使用vw或%使其响应。

2010-05-11 17:09:13

只使用

    hr
    {
        padding: 0;
        border: none;
        border-top: 1px solid #CCC;
        color: #333;
        text-align: center;
        font-size: 12px;
        vertical-align:middle;
    }
    hr:after
    {
        content: "Or";
        display: inline-block;
        position: relative;
        top: -0.7em;
        font-size: 1.2em;
        padding: 0 0.25em;
        background: white;
    }

2014-08-07 12:09:18

在不知道宽度和背景颜色的情况下解决这个问题的方法如下:

结构

<div class="strike">
   <span>Kringle</span>
</div>

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;
}

例如:http://jsfiddle.net/z8Hnz/

双线

要创建双线，请使用以下选项之一:

1)线间距固定

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    border-top: 4px double red;

例如:http://jsfiddle.net/z8Hnz/103/

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;
}

例如:http://jsfiddle.net/z8Hnz/105/

SASS (SCSS)版本

在这个解决方案的基础上，我添加了“带颜色属性”的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;
        }
    }
}

使用示例:

//content.scss
h2 {
    @include bg-strike($col1);
    color: $col1;
}

2014-03-24 07:44:41

.orSpan { 位置:绝对的; margin-top: -1.3快速眼动; margin-left: 50%; 填充:0 5 px; 背景颜色:白色; ｝ < div > <hr> <span class="orSpan">OR</span> < / div >

你可能需要调整保证金属性

2019-10-17 09:31:17

html

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;" class="add-heading">
    <hr class="add-hr">
    <h2>Add Employer</h2>
    <hr class="add-hr">
</div>

css

.add-hr { 
    display: block; height: 1px;
    border: 0; border-top: 4px solid #000;
    margin: 1em 0; padding: 0; 
  }

.add-heading h2{
  text-align: center;
}

2020-04-23 17:25:48

将居中文本添加到水平规则的中间

推荐文章

最新文章

标签