Пункт центра с фоном

Question

Я хотел бы знать, как центрировать (ширину) абзац с фоном.

Что-то вроде этого

Большое спасибо :)

<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. Таким образом, проблема заключается в том, что <p> является элементом уровня блока, и если вы придаете ему цвет фона, он будет охватывать всю ширину.

Обходным путем было бы добавить тег <span> внутри тега <p> и установить цвет фона на <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;}