Center paragraph with background

Question

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

Something like this enter image description here

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

`text-align: center;`? Question must show a minimum level of effort on your part with what you have tried. What have you tried..? — Josh Powell, Dec 02 '13 at 14:25
okay...first...its a very basic question to ask, shud have googled first.....second...i wonder why you dint googled it and third...if it's tough...where is code for our reference mate? ;) — NoobEditor, Dec 02 '13 at 14:27
I'll never understand why people don't search before they post... :/ — Nick R, Dec 02 '13 at 14:29
I searched... The probleme is that I can get that result. I only have a full white background ! Tried texte-align: center; But it does not work. I get a full width background! — jhon, Dec 02 '13 at 14:32
so provide us your code....how can you expect solution from us when we don't know the problem....makes sense????!! :) — NoobEditor, Dec 02 '13 at 14:33

score 1 · Accepted Answer · answered Dec 02 '13 at 14:35

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

This work. But I needed to let the span as a inline element! Thanks a lot! — jhon, Dec 02 '13 at 14:41

Center paragraph with background

1 Answers1