创建垂直居中的水平线，以在CSS中填充标题的宽度 [英] Create vertically centered horizontal line to fill width of title with padding in CSS

问题描述

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

I basically need to create a title that has a vertically centered horizontal line filling up the width (left and right) but that also supports multiple text elements on the same line, e.g. to form something like:

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

这是我到目前为止：

JSfiddle

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

Here, I have the demo working fine BUT it requires a background to work, this isn't a good solution since my background on my site is not a static single color (it's a fixed picture which doesn't move when you scroll).

JSfiddle

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

So what I need to do is basically fix the first version to work like the second version but without using a background.

我想像做了这样的事情：

I thought of doing something like:

<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 会是自动宽度

编辑/更新

EDIT/UPDATE

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

Here is another demo, but I would prefer something that is more automatic rather than trying to set the position absolutely because it is for a responsive fluid design...

JSfiddle

推荐答案

如果你不想使用背景，你可以使用：before 和：之后。

If you don't want to use a background, you could do a little trick using the :before and :after properties.

下面是示例 jsFiddle ，您可以将内容/属性更改为任何您喜欢的内容，并执行您所要求的内容。

Here's the example jsFiddle, you can change the content/properties to whatever you like and it does what you've asked.

以下示例。

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中填充标题的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！