Html 如何以中心为中心<；h1>；与<；hr/>；在背景图像的两侧_Html_Css_Background Image

Html 如何以中心为中心<；h1>；与<；hr/>；在背景图像的两侧

html css

Html 如何以中心为中心<；h1>；与<；hr/>；在背景图像的两侧,html,css,background-image,Html,Css,Background Image,如何在背景图像的两侧创建居中的，我还需要它来处理不同的文本长度，可以很好地缩放以便于移动查看，并使达到其容器的100%宽度我想要这个外观，但要在背景图像上。有很多答案（、和）都是关于两边都有线条的文本，但它们都依赖于在文本后面使用纯色背景，这对我来说并不适用，因为我想放在上面的页面有一个背景图像下面是我如何实现上面的外观，它可以很好地处理不同长度的文本和比例： CSS .title-box { height: 2px; background-color: rgb(21

如何在背景图像的两侧创建居中的

，

我还需要它来处理不同的文本长度，可以很好地缩放以便于移动查看，并使

达到其容器的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);
}

.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;
}

.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);
}

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

HTML

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

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

<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>

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

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


我们的故事

我尝试过下面的方法，但由于

和

处于不同的

中，它不能很好地处理各种文本宽度或比例：

HTML

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

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

<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>

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

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



我们的故事

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

那么，你知道我怎样才能获得相同的外观和行为，但没有文本的背景颜色，这样它就可以放在背景图像上吗？



我们的故事

.myContent{
显示：块；
宽度：600px；
保证金：0自动；
}
.标题框{
背景：#eee；
高度：60px；
}
.头衔外{
}
人力资源{
高度：2倍；
背景色：rgb（215,0,0）；
利润率：2米0；
宽度：25%；
浮动：左；
}
.内部标题{
利润率：0px 20px；
字号：17.5px；
字体大小：粗体；
颜色：rgb（100100100）；
浮动：左；
}

好的，我已经使用了一些代码，下面是我的解决方案。是的，它有点脏，因为我使用了

：before

和

：after

，但效果不错

HTML

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

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

<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>

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

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

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 + ":after{width:" + new_width + "px !important;}</style>");
        });
    }
    work();
    $(window).resize(function () {
        work();
    });
});

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

$（文档）.ready（函数（）{
职能工作（）{
$（“.title内部”）。每个（函数（）{
var full_width=$（窗口）.width（）；
var id=$（this.attr（“id”）；
变量title_width=$（“#”+id）.width（）；
var新宽度=（全宽度-标题宽度）/2-40；
$（'head'）.append（“#”+id+”：在{width:“+new#width+”px！important；}之前，#“+id+”：之后）；
});
}
工作（）；
$（窗口）。调整大小（函数（）{
工作（）；
});
});

因为

：before

和

：after

不是DOM的一部分，所以我使用了

.append（）

函数为每个标题在标题中附加样式标记

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

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

工作区：

HTML

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

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

<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>

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

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

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 + ":after{width:" + new_width + "px !important;}</style>");
        });
    }
    work();
    $(window).resize(function () {
        work();
    });
});

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

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

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);
}

.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;
}

.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);
}

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

HTML

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

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

<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>

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

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


我的头衔

结果：

好吧，我有一个想法，但它不能处理各种文本宽度。@MiljanPuzović是的，如果不处理各种文本宽度，它不能解决我的问题。谢谢。不过你可以加入jQuery。@MiljanPuzović发布你的解决方案，我会看一看。谢谢HaBo，但我正在努力避免硬编码宽度。寻找更有活力的东西。Arbel和Miljan建议使用jQuery来计算宽度，这看起来是可行的。同意。这看起来是更好的处理方式。+1谢谢你发布这篇文章。有趣的使用方法：before和after。我最近才意识到这些，但从未使用过。请参阅（注意：Arbel编写了该代码），该代码生成类似的结果，但无需重新加载页面。@DavidHAust，：before和：after是aswesome:）另外，请参阅我更新的JSFIDLE，我添加了.resize（）函数，因此现在无需重新加载页面。但请记住，这只是为了演示，因为没有必要在网站上。响应站点将在页面加载时获得视口，用户不会调整其视口的大小。实际上，用户将调整其视口的大小，因为他们在平板电脑和手机上具有纵向和横向视图：）谢谢您的帮助。将来肯定会使用：before和：after。我最终选择了阿贝尔的解决方案。HTML还有一个元素是你的，但是CSS和JS有点整洁。再次干杯。