Center text inside a DIV

Question

I have been stuck with this annoying issue that I have...I cannot center a text inside a div.

I managed to get the text to BEGIN at the center, but I want the text in whole to be centered.

Here is my example - any tips and tricks are VERY appreciated.

#box {
  position: absolute;
  top: 100px;
  left: 50%;
  height: 100px;
  width: 450px;
  text-align: center;
  margin: 0px 0px 0px -225px;
  border: 2px solid black;
}
#TEXT {
  position: absolute;
  top: 30px;
  left: 50%
}

<div id="box">
  <p id="TEXT">This text is not centered</p>
</div>

My example: http://jsfiddle.net/y97myrap/

Rather than editing the question you can "accept" an answer to show people which one solved it for you. — Flexo, Sep 20 '14 at 06:02
Please don't make more work for other people by vandalizing your posts. By posting on the Stack Exchange network, you've granted a non-revocable right, under the [CC BY-SA 4.0 license](//creativecommons.org/licenses/by-sa/4.0/), for Stack Exchange to distribute that content (i.e. regardless of your future choices). By Stack Exchange policy, the non-vandalized version of the post is the one which is distributed. Thus, any vandalism will be reverted. If you want to know more about deleting a post please see: [How does deleting work?](//meta.stackexchange.com/q/5221) — Dharman, Nov 20 '19 at 21:33

NoobEditor · Answer 1 · 2014-09-19T07:14:54.150

use text-align:center;, this will work if you give width to the concerned div....

Make div 100% wide, then text-align:center; will push everything in center

#box {
    position: absolute;
    top: 100px;
    left: 50%;
    height: 100px;
    width: 450px;
    text-align: center;
    margin: 0px 0px 0px -225px;
    border: 2px solid black;
}
#TEXT {
    position: absolute;
    top: 30px;
    width:100%;
    text-align:center;
    <!-- left: 50% -->
}

<div id="box">
    <p id="TEXT">This text is not centered</p>
</div>

score 1 · Answer 2 · edited Sep 19 '14 at 07:07

1

     <div style="text-align:center;">
        data is here 
     </div>

in html5

edited Sep 19 '14 at 07:07

NoobEditor

15,563
19
81
112

answered Sep 19 '14 at 07:06

**1.** This is not HTML5 **2.** OP has `Absolute` elements, so this would not work **3.** Inline CSS is generally not suggested! :) – NoobEditor Sep 19 '14 at 07:08
btw...your DP...is that GOHAN or GOTENKS? – NoobEditor Sep 19 '14 at 07:11
it is Gohan not gotenks – Sep 19 '14 at 07:13
thought so...big fan!! :) – NoobEditor Sep 19 '14 at 07:15
1

same here but no new event or any serial or movie from them ........ disappointed............ :( – Sep 19 '14 at 07:17

score 0 · Answer 3 · answered Sep 19 '14 at 07:01

0

try to remove position: absolute; from #TEXT

http://jsfiddle.net/y97myrap/4/

answered Sep 19 '14 at 07:01

Sasa

1,172
1
15
24

score 0 · Answer 4 · answered Sep 19 '14 at 07:02

Fot centering an element using position absolute, the common way is set:

position:absolute;
left:50%;
margin left:{Minus half of the width of the element you want to center}

So, my suggestion for you case is the following:

http://jsfiddle.net/y97myrap/1/

using an outside container div and then adding text-align to that one, and if you want to center the height as well, if the parent height is fixed you can just use a line height on the text the same height as the container, like this:

http://jsfiddle.net/y97myrap/5/

score 0 · Answer 5 · edited Sep 20 '14 at 06:03

0

#TEXT {
   position: relative;
   top:20%
}

Try it

edited Sep 20 '14 at 06:03

Flexo

87,323
22
191
272

answered Sep 19 '14 at 07:03

Mukul Kant

7,074
5
38
53

score 0 · Answer 6 · edited Sep 20 '14 at 06:04

0

It's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the width.

Code:

#box {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}

It will make the position of the object fixed, you can adjust the positions of the div as per your need.

edited Sep 20 '14 at 06:04

Flexo

87,323
22
191
272

answered Sep 19 '14 at 07:08

Srinivas08

974
10
21

score 0 · Answer 7 · answered Sep 19 '14 at 07:09

0

You can use display: table tecnique. Add table in container and table-cell in child element:

#box {
    position: absolute;
    top: 100px;
    left: 50%;
    height: 100px;
    width: 450px;
    text-align: center;
    margin: 0px 0px 0px -225px;
    border: 2px solid black;
    display: table;/*Add display table*/
}
#TEXT {
    display: table-cell;/*Add display table cell*/
    vertical-align: middle;/*add vertical-align middle*/
}

<div id="box">
    <p id="TEXT">This text is not centered</p>
</div>

answered Sep 19 '14 at 07:09

Alex Char

32,879
9
49
70

**Caution :** IE8+ supported! – NoobEditor Sep 19 '14 at 07:10
I hope people don not support IE8-- any more :) – Alex Char Sep 19 '14 at 07:14

score 0 · Answer 8 · answered Sep 19 '14 at 07:20

the problem in your fiddle is that you have position:absolute; and a left of 50%...I'm guessing u tried to center it this way, but the problem is the text block will start after 50%. Remove position, give it text-align:center;.

And to align it vertically consider using table cells

score 0 · Answer 9 · answered Sep 19 '14 at 07:21

0

Remove the position:absolute and just add auto margings to your #TEXT:

    #TEXT {
  top: 30px;
  left: 50%
  margin-left: auto;
  margin-right:auto;
}

answered Sep 19 '14 at 07:21

PalDev

566
8
12

score 0 · Answer 10 · edited Sep 20 '14 at 06:05

0

This code solved it:

#TEXT {
position: relative;
display: block;
text-align: center;
width: 100%;
top: 30px;
}

edited Sep 20 '14 at 06:05

Flexo

87,323
22
191
272

answered Sep 19 '14 at 18:16

Center text inside a DIV

10 Answers10