带背景的中心段落答案

【问题标题】：Center paragraph with background带背景的中心段落
【发布时间】：2013-12-18 07:07:07
【问题描述】：

我想知道如何将带有背景的段落居中（宽度）。

类似这样的

非常感谢:)

<div class="about_content">
<h1>Devenez le maitre de vos réseaux !</h1>
<p>Bienvenue dans la nouvelle bulle d’échange d’informations “Spotlinks” <br>Echangez et connectez sur le moment  vos données sociales et professionnelles</p>
</div>

.about_content {
padding: 200px;
h1{
font-size: 53px;
color: white;
text-align: center;
text-shadow: 2px 2px #333;
}
p {
text-align: center;
background: white;
color: $text-color;
display: inline-block;
}
}

【问题讨论】：

text-align: center;?问题必须表明您在尝试过的事情上付出了最低程度的努力。你试过什么..？
好吧...首先...这是一个非常基本的问题，我先用谷歌搜索了......第二...我想知道你为什么用谷歌搜索它，第三...如果很难……我们的参考伙伴的代码在哪里？ ;)
我永远不会明白为什么人们在发布之前不搜索...：/
我搜索了...问题是我可以得到那个结果。我只有全白背景！试过 texte-align: center;但它不起作用。我得到一个全宽背景！
所以向我们提供您的代码....当我们不知道问题时，您怎么能期望我们的解决方案...有意义？？？？？？ :)

标签： css background center paragraph

【解决方案1】：

好的。那么问题是因为<p> 是一个块级元素，如果你给它一个背景颜色，它将跨越整个宽度。

解决方法是在<p> 标记内添加<span> 标记并在<span> 上设置背景颜色，因为它默认是内联元素。您还需要将<span CSS 设置为display:inline-block

JSFiddle Demo

HTML：

<div class="container">
    <p><span>My text here</span></p>
</div>

CSS：

.container { background:#ccc; padding:10px;}
p { text-align:center; }
p span { display:inline-block; background:#fff; padding:5px;}

【讨论】：

这项工作。但我需要让跨度作为内联元素！非常感谢！