Center a <div> ?
- Started
- Last post
- 11 Responses
- freedom
Is the best way really this?:
img {
width:100px;
height:200px;
position:absolute;
left:50%;
margin-left:-50px;
top:50%;
margin-top:-100px;
}
- freedom0
Should say center a div.
- mg330
Is that all that's in the div and is it a text link? Why not text-align: center on the div?
- freedom0
It's just an image.
- mg330
Or you want vertically and horizontal centering? I concur that getting it right can be a pain in the ass.
- dbloc0
margin: 0 auto;
- nb0
- Hmmm. I thought this didn't work but apparently it does.orrinward2
- Awesome if you know the image dimensions.orrinward2
- orrinward20
Where possible I've been dropping img tags for vertical centering and using a div with background-position:center center and specifying the height and width of the image there.
---
img hor+vert centering:
img{
width: WIDTH px;
height: HEIGHT px;
position:absolute;
top:50%;
left:50%;
margin-left: - WIDTH / 2 px;
margin-top: - HEIGHT / 2 px;
}---
Background image method....
div.img{
background-image:url('url');
background-position: center center;
background-repeat:no-repeat;
background-size: auto HEIGHT px;
}
- omahadesigns0
^ that works?
- monNom0
check the bottom of NB's post. there's like 4 other techniques, all with positives and negatives. pick your poison.
- monNom0
I like display: table/table-cell personally, and because I'm lazy.
- mg330
I'm just gonna say what I've wanted to say all day every time I see this thread:
Why are you having such trouble centering a question mark?