CSS挑战，我可以这样做而不引入更多的HTML？ [英] CSS challenge, can I do this without introducing more HTML?

问题描述

想象我有任何块或内联块与文本。像一个段落或李或任何。如果该标签有separator类，我希望它显示如下：

所有内容都居中（text-align：center;就够了）。
这里是棘手的部分：在中心内容的任一侧，出现一个（垂直居中）。

下面的图片说明了我的想法： p>

如果我要介绍更多的HTML，然后忘记它 - 不感兴趣。

我是一个长时间的CSS用户， 。任何人都有一个想法，尽管我喜欢它，最好没有CSS3（因为工作...不能使用新的东西，因为兼容性）。

示例问题：< p class =separator> CENTER ME< / p>

解决方案

这在Firefox中有效：

  .separator {
 text-align：center; 
 height：0.5em; 
 border-bottom：2px solid black; 
 margin-bottom：0.5em; 
} 
 .separator：first-line {
 background-color：white; 
} 
  

JSFiddle Demo

Imagine I have any block or inline block with text in it. Like a paragraph or li or whatever. If that tag has the "separator" class, I want it to appear as follows:

All content is centred (text-align:center; will suffice). Here's the tricky part: on either side of the centred content, a (vertically-centred) line appears.

The following image illustrates my idea:

If I have to introduce more HTML, then forget about it - not interested.

I'm a long time CSS user, but I can't figure this one out... Anyone else got an idea? As much as I love it, preferably no CSS3 (for work... can't use new stuff because of compatibility)..

Example problem: <p class="separator">CENTRE ME</p>

解决方案

This works in Firefox:

.separator {
    text-align: center;
    height: 0.5em;
    border-bottom: 2px solid black;
    margin-bottom: 0.5em;
}
.separator:first-line {
    background-color: white;
}

JSFiddle Demo

这篇关于CSS挑战，我可以这样做而不引入更多的HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！