如何在背景图像的两侧使用 <hr/> 居中 <h1>

Posted 2023-03-05

【中文标题】如何在背景图像的两侧使用 <hr/> 居中 <h1>

【英文标题】：How to do centered <h1> with <hr/> on both sides over a background image

【发布时间】：2013-04-08 06:40:45

【问题描述】：

如何在背景图像上在两侧创建居中的<h1> 和<hr/>？

我还需要它来处理各种文本长度、很好地缩放以适应移动查看并使<hr/> 达到其容器的 100% 宽度。

我想要这样的外观，但在背景图像上。

有很多答案（here、herehere 和 here）对于两边都有线条的文本，但它们都依赖于在文本后面使用纯色背景色，这并不为我工作，因为我想把它放在上面的页面有一个背景图像。

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

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是分开的@987654334，它不能很好地处理各种文本宽度或缩放@s：

HTML

<div class="row">
    <div class="span4"><hr /></div>
    <div class="span4"><h4>OUR STORY</h4></div>
    <div class="span4"><hr /></div>
</div>

注意：此示例使用 Bootstrap 网格系统，但这不是问题/解决方案的一部分。

那么有什么想法可以让我获得相同的外观和行为，但没有文本的背景颜色，以便它可以位于背景图像上？

【问题讨论】：

嗯，我有一个想法，但它不能处理各种文本宽度。

@MiljanPuzović 是的，不处理各种文本宽度并不能解决我的问题。不过还是谢谢。

你可以包含 jQuery。

@MiljanPuzović 发布您的解决方案，我会看看。

【参考方案1】：

http://jsfiddle.net/habo/HrfuH/1/

<div class="title-box">
    <div class="myContent">
    <div class="title-outer"><hr /></div>
    <div class="title-inner "><h4>OUR STORY</h4></div>
    <div class="title-outer"><hr /></div>
    </div>
</div>


.myContent
    display:block;
    width:600px;
    margin:0 auto;

.title-box 
    background:#eee;
    height:60px;

.title-outer



hr 
    height: 2px;
    background-color:rgb(215, 0, 0);
    margin: 2em 0;
    width:25%;
    float:left;


.title-inner 
    margin:0px 20px; 
    font-size: 17.5px; 
    font-weight:bold; 
    color:rgb(100, 100, 100);
    float:left;

【讨论】：

感谢 HaBo，但我试图避免对宽度进行硬编码。寻找更有活力的东西。 Arbel 和 Miljan 建议使用 jQuery 来计算看起来可行的宽度。

同意。它看起来更好的处理方式。

【参考方案2】：

好的，我已经对这段代码进行了一些尝试，这是我的解决方案。是的，它有点脏，因为我用过:before 和:after，但是可以。

HTML

<div class="title-box">
    <span id="first" class="title-inner">OUR LOOOoo oooo oOONG STORY</span>
</div>
<div class="title-box">
    <span id="second" class="title-inner">OUR STORY</span>
</div>
<div class="title-box">
    <span id="third" class="title-inner">STORY</span>
</div>

CSS

.title-box 
    text-align: center;

.title-inner 
    margin:0px 20px;
    font-size: 17.5px;
    font-weight:bold;
    position: relative;
    color:rgb(100, 100, 100);

.title-inner:after, .title-inner:before 
    content:"";
    float: right;
    position: relative;
    top: 8px;
    height: 2px;
    background: red;

.title-inner:before 
    float: left;

jQuery

$(document).ready(function () 

    function work() 
        $(".title-inner").each(function () 
            var full_width = $(window).width();
            var id = $(this).attr("id");
            var title_width = $("#" + id).width();
            var new_width = (full_width - title_width) / 2 - 40;
            $('head').append("<style>#" + id + ":before, #" + id + ":afterwidth:" + new_width + "px !important;</style>");
        );
    
    work();
    $(window).resize(function () 
        work();
    );
);

http://jsfiddle.net/ffb3X/4/

因为:before 和:after 不是DOM 的一部分，所以我使用.append() 函数在每个标题的head 中附加样式标签。

此代码将在页面加载时计算所有内容，因此它是响应式的。

【讨论】：

+1 感谢您发布此信息。使用 :before 和 :after 的有趣方法。我最近才意识到这些，但从未使用过它们。请参阅answer I posted（注意：Arbel 编写了该代码），它产生了类似的结果，但无需重新加载页面。

@DavidHAust, :before 和 :after 太棒了 :) 另外，看看我更新的 jsfiddle，我添加了 .resize() 函数，所以现在不需要重新加载页面。但请记住 - 这仅用于演示，因为现场不需要。响应式网站将在页面加载时获得视口，用户不会调整其视口大小。

实际上，用户会调整他们的视口大小，因为他们在平板电脑和手机上都有纵向和横向视图:)

感谢您的帮助。将来肯定会使用 :before 和 :after 。我最终选择了 Arbel 的解决方案。 html 比你的多了一个元素，但 CSS 和 JS 更整洁一些。再次欢呼。

【参考方案3】：

此代码最初由 Arbel 发布，但他/她的答案由于某种原因消失了？我正在重新发布它（包括我制作的一些模组），因为它是我最终使用的解决方案。信用到期。

工作 jsFiddle：http://jsfiddle.net/pA5Gu/

HTML

<div class="title-box"> 
    <fieldset class="title-outer">
            <legend id="titleInner" class="title-inner">OUR STORY</legend>
    </fieldset>
</div>

CSS

.title-box  
    background-image: url('http://imagezo.com/images/1302-green-bubbles-awesome-background-wallpaper.jpg');
    height:100%;

.title-outer 
    border-top:2px solid rgb(215, 0, 0);
    background-color: transparent;

.title-inner 
    width:auto;
    padding:0px 20px;
    border: 0;
    background-color: transparent;
    font-size: 17.5px; 
    font-weight:bold; 
    color:rgb(255, 255, 255);

jQuery

$(document).ready(function() 
    var legendWidth = $('#titleInner').outerWidth();
    var margin = 'calc((100% - '+legendWidth+'px) / 2)';
    $('#titleInner').css('margin-left', margin);
    $('#titleInner').css('margin-right', margin);
);

【参考方案4】：

不需要JS，这里是纯CSS解决方案。

CSS

.title-hr hr 
    display: inline-block;
    width: 30%;
    margin: 5px 10px;
    border-top: 1px solid #e5e5e5;

HTML

<h1 class="title-hr"><hr />My Title<hr /></h5>

结果：http://jsfiddle.net/yptmftr4/