I just wanna center a div!
- Started
- Last post
- 39 Responses
- 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
- dbloc0
found this jquery method...haven't tried it.
http://stackoverflow.com/questio…- this does NOT require Javascript to accomplishanimatedgif
- I KNOW but it's an alternative that I'm postingdbloc
- orrinward20
jQuery vertical centering ftw.
Or alternatively set the logos as a background image, with background-position: center center.
I decided not to read all the other replies so this may have been mentioned before.
- orrinward20
Damn, year apart! I remember trying to help Projectile on this last year now...
- Projectile0
Well fuck me that was quick!! ;)
- animatedgif0
Stop suggesting jQuery as a solution, this is easily achievable in pure CSS
- lumedia0
every css and jquery solution i have tried ends up with the same cut off problem.
I thought that putting the whole thing into a table, like what dbloc said, would work but it doesnt.
I will keep searching but if anyone has a solution, please share.
- dbloc0
if you center a table within a 100% table that will definitely work...but it's super old school and not really up to standards. I wish someone would post a css alternative. I'd like to see one as well.
- 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....
- TheAnthonyWallace0
use a table dummy.
- 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;
- 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;
}