Css 添加垂直居中的水平线以填充文本右侧的块_Css

Css 添加垂直居中的水平线以填充文本右侧的块

css

Css 添加垂直居中的水平线以填充文本右侧的块,css,Css,在ASCII艺术中，我希望类似于以下内容： My Section ------------------------------ 只是我希望这一行是在CSS中完成的，以自动填充空间。我不希望它们实际上是连字符。我只想要一条视觉线条。 <html> <div style='float:left'>My Section</div> <hr> </html> 我的部门如果希望线条与文本垂直居中，可以执行以下操作： <ht

在ASCII艺术中，我希望类似于以下内容：

My Section ------------------------------

只是我希望这一行是在CSS中完成的，以自动填充空间。我不希望它们实际上是连字符。我只想要一条视觉线条。


<html>
  <div style='float:left'>My Section</div>
  <hr>
</html>

我的部门

如果希望线条与文本垂直居中，可以执行以下操作：

<html>
  <div style='float:left'>Hello &nbsp;</div>
  <hr style='position:relative;top:8px'>
</html>


你好

像这样的东西

<h1 style="background-image:url(../images/middleline.jpg);"><span style="background-color:white;">My text</span></h1>

我的文本

编辑：

另请参见。

这里有一个快速解决方案：在需要的位置制作一个宽度为100%的跨距，然后设置边框底部：1px黑色实体

行由可选连字符组成是否重要？换句话说，流向文本右侧的（不可选择的）背景图像是否有效？应该基于ems为背景图像添加定位元素（.5em，或少一点以适应行的宽度），以便无论文本有多大，它都保持垂直居中。为什么要使用ems？只需使用背景位置：中心；背景重复：重复-x；它应该保持居中。你到底为什么要用图像来做这个呢。只需使用

标记。HR更难居中。可能，是的，但你们会在展示中得到更多的古怪。