Question

我基本上需要创建一个标题，该标题具有填充宽度（左和右）的垂直居中的水平线，但也支持同一行上的多个文本元素，例如形成类似的东西：

----- Alpha - Beta - Gamma -----

这是我到目前为止所做的：

在这里，我的演示工作正常但它需要背景才能工作，这不是一个好的解决方案，因为我的网站背景不是静态单色（这是一个固定的图片，当你没有移动滚动）。

所以我需要做的是基本上修复第一个版本，就像第二个版本一样，但不使用背景。

我想做类似的事情：

<div class="content">
  <div class="line"></div>
  <div class="line-text">Some</div>
  <div class="line-gap"></div>
  <div class="line-text">Text</div>
  <div class="line-gap"></div>
  <div class="line-text">In a Line</div>
  <div class="line"></div>
</div>

.line 是自动宽度（填充左侧和右侧）， .line-gap 只需10px即可显示文本。

修改/更新

这是另一个演示，但我更喜欢一些更自动的东西，而不是试图绝对设置位置，因为它是一个响应流体设计......

JSfiddle

Answer 1

如果您不想使用背景，可以使用:before和:after属性做一些小技巧。

以下是示例jsFiddle，您可以将内容/属性更改为您喜欢的任何内容，并按照您的要求进行操作。

以下示例。

<强> HTML：

<ul>
<li class="sub-menu-item" ><a href="#">Example</a></li>
<li class="sub-menu-item" ><a href="#">Example</a></li>
</ul>

<强> CSS：

li.sub-menu-item:before,  li.sub-menu-item:after {
    content: "\2014 \2014"
}

li { 
    display:inline-block;
}

使用CSS中的填充创建垂直居中的水平线以填充标题的宽度

1 个答案: