HTML Centers Paragraph but Doesn't Center Words

Question

Okay, the title is a little weird. What I mean is that I don't want my text to be centered like this in the center of the page:

     hi!
  how are you 
i am doing good

I want my text to be like this:

hi
how are you 
i am doing good

in the center of the webpage. I've tried centering paragraphs but it doesn't seem to work. Am I missing something obvious? Sorry for the probably stupid question.

What code are you currently using? – m4n0 Sep 10 '15 at 18:28 — m4n0, Sep 10 '15 at 18:28
Put your text in a div and centre align that. – Arghya C Sep 10 '15 at 18:28 — Arghya C, Sep 10 '15 at 18:28

score 3 · Accepted Answer · answered Sep 10 '15 at 18:31

Paragraphs are block level and so with take margin:auto as a center assuming they have a defined width (or 100% which is the default).

So basically a default paragraph is centered but because it's 100% wide you can't see the centering taking place.

If you add a width you get this:

p {
  width: 90%;
  margin: auto;
  border: 1px solid grey;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum alias maxime reprehenderit, vel, dignissimos quas iure non possimus aliquam nam veritatis laborum eligendi modi soluta quasi delectus odio aut! Tempore tenetur itaque ipsa modi culpa earum
  at veritatis quod iste ab sequi perspiciatis, ratione numquam aliquam placeat assumenda dolorem dolorum.</p>

That's really neat looking and helpful. Thanks for the answer! Super easy to understand. — bard ofshipping, Sep 10 '15 at 18:39

Arghya C · Answer 2 · 2015-09-10T18:38:00.007

1

Left align of texts is natural, you don't have to do anything about that. What you need is to bring the whole chunk of text to the centre. For that, wrap your text in a container (e.g. a div) and bring that to the middle.

One simple way to do that would be to give a fixed with to the container and make margin as auto. See an example here. With width and margin: auro

HTML:

<div id="wrapper">
    hi<br />how are you <br />i am doing good
</div>

CSS:

#wrapper {
    width: 150px;
    margin: auto;
    background-color: yellow;
}

edited Sep 10 '15 at 18:38

answered Sep 10 '15 at 18:33

Arghya C

9,805
2
47
66

It totally worked!! Thank you so much, bro! That's so cool :D I actually like the direct, short, but helpful link. Thanks again! – bard ofshipping Sep 10 '15 at 18:37
1

@bardofshipping Glad that the code helped :) – Arghya C Sep 10 '15 at 18:39
1

@Paulie_D Fixed typos. And I agree with your point that link can become obsolete in future. Here, the quick link helped the op :) But, obviously an answer with code example and explanation is what makes so helpful. – Arghya C Sep 10 '15 at 18:42

score 1 · Answer 3 · answered Sep 10 '15 at 18:33

The center tag for html elements has been deprecated. What you want to do is put a margin:0 auto and a width on the container element. I put a border element on it so you can see what it's doing.

JS Fiddle - https://jsfiddle.net/1n6x6xsq/1/

HTML:

<p class="p1">
    hi<br />
    how are you <br />
    i am doing good
</p>

CSS:

.p1 {
    width:300px;
    border:1px solid red;
    margin: 0 auto;
}

score 0 · Answer 4 · answered Sep 10 '15 at 18:29

0

use margin: 0 auto; on the element. make sure it has a width

answered Sep 10 '15 at 18:29

fauverism

1,970
3
33
59

score 0 · Answer 5 · answered Sep 10 '15 at 18:38

This is a 2-step process.

step 1) center the paragraph on the page

step 2) make sure the text is left-aligned within the paragraph

Here is the html:

<p class="centered-paragraph">
  This is some text</br>
  Notice the paragraph is centered in the page,<br/>
  But the text is left-aligned within the paragraph
</p>

Here is the css:

.centered-paragraph{

  margin : 0 auto; /* step 1: center the paragraph on the page */
  width: 400px; /* you have to give it a width, or else the browser thinks it's as wide as the whole page */
  border : 1px solid black; /* i gave it a border just so you can see what's happening more clearly */

  text-align : left; /* step 2, make sure the text inside the paragraph is left-aligned. this is the default, but it doesn't hurt to declare it exlpicitly */
}

You can play with it here if you like

HTML Centers Paragraph but Doesn't Center Words

5 Answers5