I just wanna center a div!
- Started
- Last post
- 39 Responses
- orrinward0
I like thatboyneave's method. Standardize the image size and use 50% positioning with a negative margin of half the width/height.
- gregorywieber0
How about using jQuery to do the vertical centering, which will work in just about all modern browsers, and falling back on a design with no vertical centering for the truly ancient browsers?
- uan0
div.container {
background-image: url(bg210x210.png);
min-width:210px;
min-height:210px;
height:210px;
width:210px;
display: table-cell;
vertical-align: middle;
text-align:center;
}
- brodster0
no one is stopping you, center that div!
- mantrakid0
if this were science vs. religion, tables = dinosaurs. they may be old but you cant really argue against them when it gets down to it.
- mantrakid0
every time i run into an issue like this, i spend 60-120 minutes trying to do it right with css, then say 'fuck it' and do it all up in a table in 10 minutes and have it looking exactly like i need in every browser.
- ukit20
Tables aren't old, they've always been perfectly fine to use.
Just that you should be using them for tables of data, not layout.
- vaxorcist0
tables... if you're doing an email newsletter in pure css layout, and you have to make it work on outlook, you'll remember how tables made some things easier....
- Projectile0
right... so it's either calculate width/height for each one or make them all the same size. fair enough... I'll do it one way or another. I'm just amazed that this can't be done!
- TheAnthonyWallace0
use a table dummy.
- odds0
- wckd0
DIV.epic {
float: left;
background: url('bg.gif');
display: block;
width: 210px;
height: 120px;
margin: 5px;
position:relative;
}
DIV.epic IMG {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}no?
- this will not center vertically and horizontallydbloc
- right you are, only checked ffwckd
- yup, this works in safari , ff and chrome.
working link: http://balas.me/stuf…ESKEMA - this is only centering 100% horizontally. It is fixed vertically.dbloc
- no, it is centering both vertically and horizontally.
http://balas.me/stuf…ESKEMA - at least on my end...ESKEMA
- not working for me in any browser..are you on PC by chance?dbloc
- Mac Lion, works here in safari 5.1.2, FF 4.0.1 and latest Chrome.ESKEMA
- ETM0
I am too lazy to read this all again, so if already mentioned I apologize, but just set your line height to the same value as your div height (or play with it a bit in that general range)... centered vertically. Horizontally is easy and mentioned, margin: auto; and as a fail safe, text-align:center;
- thecreativefire0
if your logos are all in the same div then wouldn't the css properties "vertical-align:middle; text-align:center;" attached to the div work?
- lumedia0
BUMP, follow up on this post. I am doing the same thing with the following code:
#center {
position: absolute;
left:50%;
top:50%;
margin-left: -425px;
margin-top: -360px;
height: 720px;
width: 850px;
text-align: center;
}it works but the problem is that if the browser window is too small the top of the content gets cropped off the top of the page. See link, and make the browser window small:
Anyone care to enlighten me on how to fix this? Would really appreciate the help. I cant find anything that helps.
- dbloc0
do it in a fucking table then
- ETM0
The line height method works and should allow align:vertical-center; to work. I create logo grids all the time by putting them in lists and floating the li element so they stack.
So in your CSS (roughly as I am rushing);
Creat
- WTF I didn't press ANYTHING to submit... to be continued below.ETM
- at&t dropped your call.mikotondria3
- The fingers you used to touch type...are too fat. Please mash the screen to obtain a dialing wand.ETM
- Anyway, I recommend a list over a bunch of divs for this.ETM