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/

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

Answer 2

要动态保留文本的填充，您需要使用CSS outline属性：

body {
  background-color: #033569;
}
.container {
  text-align: center;
}
h2 {
  display: inline;
  text-transform: uppercase;
  background-color: #176684;
  color: white;
  font-family: sans-serif;
  outline: 5px solid #176684;
}

<div class="container">
  <h2>Make search awesome using Open Source</h2>
  <p>Click Full Page button then resize the browser</p>
</div>

或查看示例并在此 fiddle 中调整容器宽度。

容器宽度低于200px：
enter image description here

Answer 3

哦，只需使用CSS3框阴影来模拟每行两侧的填充：

＆＃13;

body {
  font-family: Arial, sans-serif;
  color: #FFFFFF;
  background-color: #003366;
}
.section_title {
  text-align: center;
}
.section_title h2 {
  display: inline;
  font-size: 3em;
  background: #176072;
  box-shadow: -.5em 0 #1D758C, .5em 0 #1D758C;
}

＆＃13;

<div class="section_title">
  <h2>Make search awesome using Open Source</h2>
  <p>A different color box-shadow is used for illustration.</p>
</div>

＆＃13;

Answer 4

我能做的最好https://jsfiddle.net/tonytansley/91j10osv/3/ - 没有回复抱歉

CustomException

CSS

<div class="banner">
    <div>
        <h2>Make search awesome using</h2>
        <h2>Open Source</h2>
    </div>
</div>

<hr/>

<div class="banner">
    <div>
        <h2>Make search awesome using&nbsp;&nbsp;&nbsp;<br/>
            &nbsp;&nbsp;&nbsp;Open Source</h2>
    </div>
</div>

<hr/>

<div class="banner">
    <div>
        <h2>Make search awesome using<em></em><br/>
            <em></em>Open Source</h2>
    </div>
</div>

Answer 5

试试这个

HTML代码......

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>

<div class="holder">
    <h2>&nbsp;Make search awesome using&nbsp;</h2>
    <h2>&nbsp;Open Sources&nbsp;</h2>
</div>
</body>

</html>

css代码

body{
    margin:0;
}


div.holder{
    width:auto;
    height: auto;
    text-align: center;
}

div.holder h2{
    font-family:"Oswald", Arial, sans-serif;
    font-size: 4.5em;
    text-transform:uppercase;
    background: #176072;
    display: inline;
    line-height: 80px;


}

在每行中心对齐文本

5 个答案: