相关疑难解决方法(0)

我正在尝试制作一个水平规则,中间有一些文字.例如:

-----------------------------------我的头衔------------ -----------------

有没有办法在CSS中做到这一点？没有所有" - "破灭显然.

我正在研究一些CSS,其中设计要求页面标题(标题)以水平线为中心,水平线在两侧垂直居中.此外,页面上有背景图像,因此标题的背景需要是透明的.

我已经集中了标题,我可以使用伪类来创建该行.但是当我越过标题的文本时,我需要该行消失.

我考虑过使用一个透明的背景渐变,但由于每个标题的长度不同,我不知道在哪里放置停止.

这是迄今为止的CSS:

h1 {  
    text-align: center;  
    position: relative;  
    font-size: 30px;  
    z-index: 1;  
}  

h1:after {  
    content: '';  
    background-color: red;  
    height: 1px;  
    display: block;  
    position: absolute;  
    top: 18px;  
    left: 0;  
    width: 100%;  
}  

这是我所在的地方:http: //jsfiddle.net/XWVxk/1/

这可以用CSS完成而不添加任何额外的HTML吗？

想象一下,我有任何带有文本的块或内联块.像段落或李或其他什么.如果该标记具有"分隔符"类,我希望它显示如下:

所有内容都居中(text-align:center;就足够了).这是一个棘手的部分:在居中内容的两侧,出现一条(垂直居中的)线.

下图说明了我的想法:

如果我必须引入更多HTML,那么就忘掉它 - 不感兴趣.

我是一个很长时间的CSS用户,但我无法想象这一个......其他人有个主意吗？尽管我喜欢它,但最好没有CSS3(因为工作......因为兼容性而无法使用新的东西)..

示例问题: <p class="separator">CENTRE ME</p>

我需要在标题文本的两侧创建一个标题长度相等的标题,并在行和文本之间创建一个固定大小的填充.文本会有所不同,因此不能设置宽度.这些行应占用标题容器中可用的所有剩余宽度.标题文字不得设置背景,因为它背后的背景会有所不同.像这样的东西:

-------------------------------------------------- -------一些文字----------------------------------------- ----------------

我用表解决了它:

<table width="100%">
  <td><hr /></td>
  <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
  <td><hr /></td>
</table>?

你可以在这里试试:http://jsfiddle.net/md2dF/3/

从语义上讲,这是一个非常糟糕的解决方案,标题与表格数据无关.没有桌子你会怎么做？

总结一下(因为建议的解决方案都忽略了一个或多个要求):

• 标题不得有固定的宽度
• 标题文字不得有背景
• 标题文字不得有固定的宽度
• 文本两侧的线条必须占用所有剩余宽度
• 线条和文本之间的填充必须具有固定的宽度
• 如有疑问,请查看http://jsfiddle.net/md2dF/3/

我想在中间显示一个带有单词的水平线,使其如下所示:

我正在尝试这个并不起作用:

HTML:

<h2><span>Test</span></h2>

CSS:

h2{
    font-size: 100px;
    border-top: solid 1px black;
    width: 100%;
    height: 50px;
    margin-top: 25px;
    top: 50%;
    z-index: 1;    
}

span{
     background: #fff;
      padding: 0 20px;
      margin-top:-25px;
       display: inline-block;
       z-index: 5;
}

JSFiddle: http ://jsfiddle.net/2ds9a/

如何创建中心<h1>与<hr/>两侧在一个背景图像？

我还需要它处理各种长度的文本，可以很好地缩放以进行移动查看，并<hr/>使其容器的宽度达到100％。

我想要这种外观，但要覆盖背景图片。

对于在两边带有线条的文本，有很多答案（在这里，在 这里和在这里），但是它们都依赖于在文本后面使用纯色背景色，这对我来说不起作用，因为我要放置此页面上有背景图片。

这是我实现上述外观的方式，该外观可以处理各种长度的文本并可以很好地缩放：

的CSS

.title-box {
    height: 2px; 
    background-color: rgb(215, 0, 0); 
    text-align: center;
}
.title-outer {
    background-color:rgb(230, 230, 230); 
    position: relative; 
    top: -0.7em;
}
.title-inner {
    margin:0px 20px; 
    font-size: 17.5px; 
    font-weight:bold; 
    color:rgb(100, 100, 100);
}

的HTML

<div class="title-box">
    <span class="title-outer">
        <span class="title-inner">OUR STORY</span>
    </span>
</div>

我曾尝试下面的方法，它样的作品，但它并不能很好地因处理各种文本的宽度或规模<h1>和<hr/>S IN单独为<div>S：

的HTML

<div class="row">
    <div class="span4"><hr /></div>
    <div …