14

我正在尝试将标题文本设置为类似于默认图例文本在字段集中的显示方式；也就是说，我想要一条类似删除线的线来达到但不是通过文本。我似乎找不到任何有关如何完成此任务的信息，而且由于在许多其他问题上，Google 总是将我引导到 Stack Overflow 寻求答案，我认为这里的某个人也许可以给我建议。

为了更清晰。我正在尝试对标题文本产生这种影响：

                              居中的标题文本                              

有没有办法做到这一点？

4

9 回答 9

15

见：http: //jsfiddle.net/thirtydot/jm4VQ/

如果文本需要换行，这将不起作用。在 IE7 中，将没有行。

HTML：

<h2><span>Centered Header Text</span></h2>

CSS：

h2 {
    text-align: center;
    display: table;
    width: 100%;
}
h2 > span, h2:before, h2:after {
    display: table-cell;
}
h2:before, h2:after {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    width: 50%;
    content: ' ';
}
h2 > span {
    white-space: nowrap;
    padding: 0 9px;
}
于 2011-05-12T23:28:43.700 回答
2

编辑：

<h2><strike>&nbsp;&nbsp;&nbsp;&nbsp;</strike>Your Text Here<strike>&nbsp;&nbsp;&nbsp;&nbsp;</strike></h2>

以下是使用一些简单标签和不间断空格的方法。

我会使用一张图片并收工，但这似乎对我有用：

CSS

  fieldset {
    border-right: 0px;
    border-left: 0px;
    border-bottom: 0px;
    width: 200px;
  }
  legend {
    margin: 0 25%;
  }

HTML

<fieldset>
  <legend>My Text Here</legend>
</fieldset>

这是我可以弄清楚如何用css做到这一点的唯一方法。注意宽度是固定的。再一次，我自己不会这样做。

CSS Cat 不认可

于 2011-05-12T22:20:27.530 回答
2
于 2012-02-13T16:36:24.707 回答
1

这是我在客户网站上使用的内容：http: //jsfiddle.net/TPgE4/

优点：

  • 无需图像 - 立即渲染
  • 使用填充来控制文本两侧的空间
  • 文本可以居中对齐，或左/右对齐——只需添加，例如， margin-left: 8px或margin-right: 8px在h2 span样式定义上使其看起来不错

缺点：

  • 需要使用额外的标签，例如<span>...</span>内部标题标签
  • 文字必须适合一行以获得良好的外观
  • 元素上的背景颜色<span>必须与周围的背景颜色匹配，因此如果您有非纯色背景图像、渐变或图案，它将无法完美匹配
于 2012-03-14T20:38:31.233 回答
1

派对有点晚了，但这是我的解决方案：https ://jsfiddle.net/g43pt908/

不需要图像，并且不依赖于背景颜色。

HTML

<div class="hr-text">
    <span>Some text</span>
</div>

CSS

.hr-text {
    border-top: 1px solid #999;
    text-align: center;
    background-color: inherit;
}

.hr-text span {
    display: inline-block;
    position: relative;
    height: 14px;
    top: -12px;
    font-size: 14px;
    font-style: italic;
    color: #666;
    background-color: inherit;
    padding: 0 10px;
}
于 2016-02-09T09:03:19.720 回答
1

由于所有最新的浏览器都支持 flexbox，而且距离作者提到 IE8 的要求已有五年了，我想用它来构建一个新的解决方案有一些乐趣。

各种例子变得越来越复杂：

https://jsfiddle.net/0mL79b4h/1/

https://jsfiddle.net/0mL79b4h/2/

CSS

div {
  display: flex;
  align-items: center;
}

div:before,
div:after {
  border: 1px solid #000000;
  border-radius: 2px;
  height: 2px;

  display: block;

  content: "";
  flex: 1;

  width: 100%;
}

h1 {
  text-align: center;

  margin: 8px;
}

HTML

<div>
  <h1>Example Text</h1>
</div>

<div>
  <h1>Multi-Line<br>Example Text</h1>
</div>

优点：

  • 使用弹性盒子！
  • 超级简单的 HTML。
  • 左右两侧可以调整不对称。
  • 零背景问题，没有继承颜色等。
  • 流体宽度。
  • 多线支持。
  • 左/中/右/自定义对齐：只需分别调整前后元素的 flex 属性，数字越大，该侧的空间越大。完全删除一个以左对齐或右对齐。
  • 通过使用边框样式来产生有趣的效果（在这个例子中我实际上选择了圆形边框）。将高度设置为 0px 并使用border-top 代替通用线。

缺点：

  • 使用弹性盒。叫我懒惰，但我在这个例子中没有建立任何向后兼容性，所以它在支持伪元素但不支持 flexbox 的浏览器上看起来很奇怪，尽管最后我检查的是 Chrome（Firefox 等），无论如何，它们都会自动更新。可能想使用一些 Modernizr。
于 2016-11-08T12:50:46.133 回答
0

我不确定这是否适合您的需要...

h1:before, h1:after {
 content: " ------------- ";
}
于 2011-05-12T22:07:14.460 回答
0

这感觉不是一个很好的答案，但无论如何我都会发布它。

见：http: //jsfiddle.net/rFmQg/

<h2><span>Centered Header Text</span></h2>

h2 {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    text-align: center
}
h2 span {
    background: #fff;
    padding: 0 9px
}

我不喜欢它，因为：

  • 您必须使用图像。
  • 这。 （仅在背景匹配时才有效）
于 2011-05-12T22:20:46.860 回答
0 
body { padding-top: 100px; }

div.parent {
    text-align: center;
    border-top: 1px solid #ccc;
}

div.parent div {
    display: inline-block;
    margin-top: -0.8em;
    padding: 0 0.5em;
    background: #fff;
}

<body>
    <div class="parent">
        <div>My Text Here</div>
    </div>
</body>

这是一个与您的设计相匹配的流体宽度解决方案，在 IE7 中应该没问题（尽管我承认我没有检查）。有几个缺点：

  • 您丢失了字段集/图例语义。
  • 您不能在文本上放置透明背景。

如果您不需要它是流体宽度，onteria_ 的解决方案可能是您最好的选择。

于 2011-05-13T00:08:06.050 回答