center text inside a div element

Question

I have a simple piece of html:

  <div style="width:60%;color:#000;text-align:center;">
    This is a test
  </div>

I want to center the text that is inside the div, but it is not working. I have tried other solutions in similar stack overflow questions but to no avail. I have tried using the use text-align in a paragraph element, but that does not work also. How can I get it to center horizontally?

It is presently aligning left.

Take a look at this answer :-) http://stackoverflow.com/questions/13994549/trouble-vertically-centering-text-in-another-div-with-relative-sizing/16195362#16195362 — dave, Aug 02 '14 at 18:12
Your code seems to be fine, can you share your complete code. — Ashish Balchandani, Aug 02 '14 at 18:15
To easily debug issues like this, put a border on your container so you can see the position of it like @SureshPonnukalai did — EternalHour, Aug 02 '14 at 18:16
Thanks guys. ABFORCE, I tried doing it inside a p block which did not work as well. — user3648426, Aug 02 '14 at 18:16
Once again, thanks, this is all great advice. I am learning. :) — user3648426, Aug 02 '14 at 18:16
Here are two simple methods to center elements within a div, vertically, horizontally or both (pure CSS): http://stackoverflow.com/a/31977476/3597276 — Michael Benjamin, Aug 19 '15 at 21:14

score 2 · Answer 1 · answered Aug 02 '14 at 18:18

Your code is working on my machine.

The way you have it written, the string will center itself within 60% of the div's available space. This will have an effect of looking slightly off-center, but technically centered within your div.

If you want it dead center in the middle of your page, change the width to 100%.

score -2 · Answer 2 · edited Aug 02 '14 at 19:10

-2

Try using:

 <center>
    your text here
 </center>

inside your div

edited Aug 02 '14 at 19:10

Lucas Trzesniewski

50,214
11
107
158

answered Aug 02 '14 at 18:17

angel

104
12

`center` tag is deprecated – frogatto Aug 02 '14 at 18:18
yes i know. but normally "align: center" work and it's only solution – angel Aug 02 '14 at 18:22
@user3648426 your code work on my computer so verify if div width is 80% on your screen – angel Aug 02 '14 at 18:24

score -2 · Answer 3 · edited Aug 02 '14 at 18:55

-2

I just want to add that using <section> instead of also works for the specific purpose I need.

edited Aug 02 '14 at 18:55

Bleeding Fingers

6,993
7
46
74

answered Aug 02 '14 at 18:27

user3648426

227
1
4
13

Please don't add "thank you" as an answer. Instead, vote up the answers that you find helpful. – Eugene Podskal Aug 02 '14 at 18:45
Please don't add "thank you" as an answer. Instead, vote up the answers that you find helpful. – Eugene Podskal Aug 02 '14 at 18:45
@EugenePodskal This is not a "thank you" type answer. Check the edit. – Bleeding Fingers Aug 02 '14 at 18:58
OK, as I said, for my purposes, this got the job done. One thing about stack overflow is that some people become Nazis here. – user3648426 Aug 06 '14 at 17:44

center text inside a div element

3 Answers3