Center paragraph with background

Question

I would like to know how to center (width) a paragraph with a background.

Something like this

Thanks a lot :)

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

Answer 1

OK. So then the problem is because <p> is a block-level element, and if you give it a background colour it will span the full width.

A workaround would be to add a <span> tag inside the <p> tag and set the background colour on the <span>, because it is by default an inline element. You will also need to set the <span CSS to 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;}