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

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

html css

Html 在每行居中对齐的文本前后添加填充,html,css,Html,Css,我想要这个布局：所以我试了一下：使用开源让搜索变得很棒 .banner.section\u title h2{ 字体系列：“Oswald”，Arial，无衬线；字号：5em；线高：1.4em；文本转换：大写；溢出：隐藏；文本对齐：居中；显示：内联；填充：0 30px；背景：#176072； } 但我得到的结果是：因此，我想添加填充（红色圆圈）。我该怎么做对于响应性设计，我希望得到以下结果：这里有一个解决方案。使用span或div元素将所需的组件包装在单独的行中。

我想要这个布局：

所以我试了一下：

使用开源让搜索变得很棒

.banner.section\u title h2{
字体系列：“Oswald”，Arial，无衬线；
字号：5em；
线高：1.4em；
文本转换：大写；
溢出：隐藏；
文本对齐：居中；
显示：内联；
填充：0 30px；
背景：#176072；
}

但我得到的结果是：

因此，我想添加填充（红色圆圈）。我该怎么做

对于响应性设计，我希望得到以下结果：

这里有一个解决方案。使用

span

或

div

元素将所需的组件包装在单独的行中。这将使您能够独立设置文本部分的样式，但将全文保留在标题标记内

使用Open Souce让搜索变得很棒

h2跨度{
字体系列：“Oswald”，Arial，无衬线；
字号：3em；
线高：1.4em；
文本转换：大写；
填充：0 30px；
背景：#176072；
颜色：#FFFFFF；
显示：内联块；
}
氢{
背景色：#062949；
填充：25px；
文本对齐：居中；
}

jsFiddle：

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

我能做的最好的事情-不响应抱歉

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

要动态地保留文本上的填充，需要使用CSS

outline

属性：

正文{
背景色：#033569；
}
.集装箱{
文本对齐：居中；
}
氢{
显示：内联；
文本转换：大写；
背景色：#176684；
颜色：白色；
字体系列：无衬线；
外形：5px实心#176684；
}


使用开源让搜索变得很棒
单击“全页”按钮，然后调整浏览器的大小

试试这个

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>

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

正文{
字体系列：Arial，无衬线；
颜色：#FFFFFF；
背景色：#003366；
}
.章节标题{
文本对齐：居中；
}
.第节标题h2{
显示：内联；
字号：3em；
背景：#176072；
盒影：-.5em0#1D758C，.5em0#1D758C；
}


使用开源让搜索变得很棒
插图中使用了不同的颜色框阴影

如果页面允许的话，您是否希望开放源代码在同一行？请添加完整的html。。或者创建一个fiddle我想要的在第一张图片中。@RinoRaj OP提供了足够的代码。附加的代码只会使问题变得混乱。请更新您的问题以反映响应的请求，并定义您希望响应的解决方案如何工作。一旦完成，我会看看我能做些什么。谢谢你的最佳选择：）但有时我会在文本中得到一个像素线。。。请查看所附图片中“A”之前的像素可能只是渲染或浏览器上的缩放设置出现问题。当我查看您的实际页面时，它在我的浏览器中看起来很好。我在Mac上使用了Chrome和Safari，但我看不到像素线。可能是。但最后我使用了盒子阴影方法（由Salman回答），效果最好。感谢您的帮助…在我在上一个代码（css大纲）中发现问题后，效果最好

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

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;


}