How can <p> be centered and justified?

Question

I have a simple p but I am not able to justify it. I centered it but don't know how to justify?

HTML:

<p>This is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about meThis is about me</p>

CSS:

p{
    text-align: justify;
    margin: 0 auto;
}

Fiddle.

I checked out this post but it didn't helped! :(

Answer 1

Mohammed,

It looks like your last CSS, you have the text-align set to 'center'. If you are looking to have it full justified, you want it to look like this:

.major_data .about p:nth-child(2){
    text-align: justify;
}

Basically, the available options for text-align are:

• Left
• Right
• Center
• Justify

Center is what you were using before, which is why your text was centered. Justify is the equivalent "full" in Word or something, which I believe is what you are looking for.

Answer 2

see this one DEMO

.major_data .about p:nth-child(2){
text-align: justify;
 }

Answer 3

So after searching an hour I got a simple solution. I was after the p to get in centered of the div and get it justified. All of you thanks for your answers!

Here's the solution: Fiddle.

.major_data .about p:nth-child(2){
    text-align: justify;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 20px;
}

We just need some width set the margin: 0 auto; and get the p into the center of the div.