Center text inside a DIV [duplicate] - html

Question

This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 3 years ago.
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/

Answer 1

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

Answer 2

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>

Answer 3

try to remove position: absolute; from #TEXT
http://jsfiddle.net/y97myrap/4/

Answer 4

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/

Answer 5

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>

Answer 6

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

Answer 7

Remove the position:absolute and just add auto margings to your #TEXT:
#TEXT {
top: 30px;
left: 50%
margin-left: auto;
margin-right:auto;
}

Answer 8

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

Answer 9

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.

Answer 10

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