如何在正文中创建可自定义尺寸的垂直居中线条?
在正文中创建垂直居中、可自定义的线条
嘿,我完全懂你的需求——想要一条能像LaTeX的\rule{length}{width}那样自由控制长度和粗细,还能和普通文字垂直居中对齐的线条,而不是默认---那种又细又短、没法调整的横线对吧?
这里给你一个简单实用的方案,利用Markdown支持内嵌HTML和CSS的特性就能实现:
核心实现代码
你可以直接用inline的<span>元素配合CSS样式来创建这条线:
<span style="display: inline-block; width: 60px; height: 2px; background: #000; vertical-align: middle;"></span>
参数解释:
width: 60px:控制线条的长度(对应LaTeX里的length),可以改成你需要的数值,比如100px或者2emheight: 2px:控制线条的粗细(对应LaTeX里的width),数值越大线条越粗background: #000:设置线条的颜色,比如改成#666灰色或者#ff4400橙色都可以vertical-align: middle:这是实现垂直居中的关键,确保线条和周围文字在同一中线位置
实际使用示例
把代码嵌入到普通文字里,效果就出来了:
这是一段测试文字 中间的线条和文字完美垂直居中,长短粗细都能按需调整!
如果你的编辑器支持自定义CSS(比如一些博客平台),还可以把样式写成类,方便重复使用:
<style> .custom-rule { display: inline-block; width: 60px; height: 2px; background: #000; vertical-align: middle; } </style>
之后只要写<span class="custom-rule"></span>就能快速调用,还能随时修改类里的参数统一调整样式。
内容的提问来源于stack exchange,提问作者Jaans




