html - 在每行居中对齐的文本前后添加填充

Question

我想要这样的布局:

所以我尝试了这个:

<h2>Make search awesome using Open Source</h2>

.banner .section_title h2 {
    font-family: "Oswald", Arial, sans-serif;
    font-size: 5em;
    line-height: 1.4em;
    text-transform: uppercase;
    overflow: hidden;
    text-align: center;
    display: inline;
    padding: 0 30px;
    background: #176072;
}

但我得到的结果是:

所以，我想添加填充(红色圆圈)。我该怎么做？

对于响应式设计，我想要这样的结果:

Answer 1

这是一种解决方案。使用 span 或 div 元素将您需要的组件包装在单独的行中。这将使您独立地设置文本部分的样式，但将全文保留在标题标记中。

<h2><span>Make Search Awesome Using</span> <span>Open Souce</span></h2>

h2 span {
    font-family: "Oswald", Arial, sans-serif;
    font-size: 3em;
    line-height: 1.4em;
    text-transform: uppercase;
    padding: 0 30px;
    background: #176072;
    color: #FFFFFF;
    display: inline-block;
}
h2 {
    background-color: #062949;
    padding: 25px;
    text-align: center;
}

jsFiddle:http://jsfiddle.net/vcpo5rmj/

注意:这不是一个完整的响应式解决方案。