将居中文本添加到水平线的中间 [英] Add centered text to the middle of a horizontal rule
问题描述
我想知道 xhtml 1.0 strict 中有哪些选项可以像这样在文本的两侧创建一行:
<前>第一节----------------------- 下一节 -----------------------第二节我想过做一些像这样的奇葩事情:
<div style="float:left; width: 44%;"><hr/></div><div style="float:right; width: 44%;"><hr/></div>下一节或者，因为上面有对齐问题(垂直和水平):
<td style="width:47%"><hr/></td><td style="vertical-align:middle; text-align: center">下一部分</td><td style="width:47%"><hr/></td></tr></table>这也有对齐问题，我用这个烂摊子解决了:
<td style="border-bottom: 1px 纯灰色；width: 47%"> </td><td style="vertical-align:middle;text-align:center" rowspan="2">下一部分</td><td style="border-bottom: 1px 纯灰色；width: 47%"> </td></tr><tr><td> </td><td> </td></tr></table>除了对齐问题之外，这两个选项都让人感觉很笨拙"，如果您之前碰巧见过这个并且知道一个优雅的解决方案，我会非常感激.
解决方案 Flexbox 是解决方案:
.separator {显示:弹性；对齐项目:居中；文本对齐:居中；}.separator::before,.separator::after {内容: '';弹性:1；边框底部:1px 实心 #000；}.separator:not(:empty)::before {右边距:0.25em；}.separator:not(:empty)::after {左边距:0.25em；}
<div class="separator">下一节</div>
现在每个浏览器都支持它，您可以通过添加各自的供应商前缀来确保与十年前的浏览器兼容，如果需要.无论如何它都会优雅地降级.
I'm wondering what options one has in xhtml 1.0 strict to create a line on both sides of text like-so:
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.
解决方案 Flexbox is the solution:
.separator {
display: flex;
align-items: center;
text-align: center;
}
.separator::before,
.separator::after {
content: '';
flex: 1;
border-bottom: 1px solid #000;
}
.separator:not(:empty)::before {
margin-right: .25em;
}
.separator:not(:empty)::after {
margin-left: .25em;
}
<div class="separator">Next section</div>
Nowadays every browser supports it, and you can ensure compatibility with decade-old browsers by adding respective vendor prefixes if needed. It would degrade gracefully anyways.
这篇关于将居中文本添加到水平线的中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆