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

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

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

当前回答

这是一个2年前的帖子，但这里是我如何使用一个元素和CSS来处理这些情况。

h1 {
    text-align: center;
}

h1:before,
h1:after {
    content: "";
    background: url('http://heritageonfifth.com/images/seperator.png') left center repeat-x;
    width: 15%;
    height: 30px;
    display: inline-block;
    margin: 0 15px 0 0;
}

h1:after{
    background-position: right center;
    margin: 0 0 0 15px;
}

这里有一个小提琴来检查:http://jsfiddle.net/sRhBc/(随机图像从谷歌采取的边界)。

这种方法的唯一缺点是它不支持IE7。

2012-09-18 13:30:36

其他回答

试试这个:

.divider { 宽度:500 px; text-align:中心; ｝ .divider hr { margin-left:汽车; margin-right:汽车; 宽度:40%; ｝ .left { 浮:左; ｝铃声{ 浮:正确; ｝ < div class = "分" > <hr class="left"/>TEXT<hr class="right" /> < / div >

实时预览jsFiddle。

2010-05-11 17:07:14

如何:

看看这个JSFiddle。

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

2010-05-11 17:09:13

你可以不需要<hr />就完成这个任务。从语义上讲，设计应该用CSS的手段来完成，在这种情况下是很有可能的。

div.header
{
  position: relative;
  text-align: center;
  padding: 0 10px;
  background: #ffffff;
}

div.line
{
  position: absolute;
  top: 50%;
  border-top: 1px dashed;
  z-index: -1;
}

<div class="header">
  Next section
  <div class="line">&nbsp;</div>
</div>

2010-05-11 17:07:56

更新:这将不工作使用HTML5

相反，请查看这个问题以获得更多技术:CSS挑战，我可以在不引入更多HTML的情况下做到这一点吗?

我使用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;
}

另一个好方法是http://robots.thoughtbot.com/

他使用背景图像和浮动来达到一种很酷的效果

2010-05-11 17:06:59

请尝试使用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

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

推荐文章

最新文章

标签