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

我想知道在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>

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

当前回答

请尝试使用bootstrap:

<div class="text-center d-flex">
  <hr className="flex-grow-1" />
  <span className="px-2 font-weight-lighter small align-self-center">
    Hello
  </span>
  <hr className="flex-grow-1" />
</div>

这是结果

2020-08-07 04:28:31

其他回答

.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

<fieldset style="border:0px; border-top:1px solid black">
    <legend>Test</legend>
</fieldset>

邪恶的黑客...

2010-05-11 17:10:34

Flexbox和SCSS

HTML

<div class="divider">divider</div>

SCSS

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #c2c2c2;

    &::before,
    &::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid #c2c2c2;
    }
    &::before {
        margin-right: 0.25em;
    }
    &::after {
        margin-left: 0.25em;
    }
}

2020-12-16 08:22:56

演示页面

HTML

<header>
  <h1 contenteditable>Write something</h1>
</header>

CSS

header{ 
  display:table;
  text-align:center; 
}
header:before, header:after{ 
  content:'';
  display:table-cell; 
  background:#000; 
  width:50%;
  -webkit-transform:scaleY(0.3);
  transform:scaleY(0.3);
}
header > h1{ white-space:pre; padding:0 15px; }

2013-11-10 10:09:15

你可以使用相对位置在父节点上设置一个高度

.fake-legend { 高度:15 px; 宽度:100%; Border-bottom:固体2px #000; text-align:中心; Margin: 2em 0; ｝ .fake-legend span { 背景:# fff; 位置:相对; 上图:0; 填充:0 20px; 行高:30 px; ｝ < p class = " fake-legend " > < span >或< / span > < / p >

2015-02-11 17:18:27

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

推荐文章

最新文章

标签