Perfectly center a <div> of text?
- Started
- Last post
- 7 Responses
- ********
This doesn't seem to work for me:
top:50%;
left:50%;I have a <div> of just text I want to perfectly center (and have the type centered) on a webpage.
- Continuity0
div {
margin: auto;
}Hey presto, job done.
(Does not work with some versions of IE, however.)
- ********0
If you know the dimensions of the div you can do it in pure css.
Lets say the div is 500px wide and 200px high.
div {
width: 500px;
height: 200px;
top:50%;
left:50%;
margin-left:-250px;/*half width*/
margin-top:-100px;/*half height*/
}
- Gordy220
I think the IE^ fix is to set the parent div to have text-align:center
- Yup, because at Microsoft, containers and text are practically the same thing right?********
- Yup, because at Microsoft, containers and text are practically the same thing right?
- ********0
It's tricky because it's live type. Margin didn't work.
- Gordy220
New - is it in a P or an H1?
- estetic0
div.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}This presents some issues with positioning the container div but its the only reliable way to center vertically with live text (unknown widths act) w/o JS
- ********0
You don't recommend javascript?
- There is no need if you do what orinwards said.voiceof
- But it's live type. No dimensions.********