I just wanna center a div!
- Started
- Last post
- 39 Responses
- Projectile
I have a bunch of logos to display. I want to give them all an image-based border/background to give the page some uniformity. So I've made myself a background image that's 210x120 and I want to center each of the logos (all different shapes and sizes) in the background image, both horizontally and vertically.
seriously.. I've looked, researched, tried and tested and nothing seems to work! I'm about to make the entire page a table, or just calculate padding/margin separately for each one, but I'd really love to have a class I can just apply to all these logos. SURELY there must be a really easy way that I'm missing?
- abettertomorrow0
margin:auto
- This will only center them horizontally I thinkthatboyneave
- yup. but FUCK knows why! seriously, why is this so hard? WHY ME!!!!! *sob*Projectile
- Awwww. Try that, below. Then go get a beer.thatboyneave
- thatboyneave0
Batch process the logo images so they are all on the same sized canvas. Then adjust the top margin in CSS so they look vertically centered. Probably the quickest route even if it's not an entirely CSS solution.
- abettertomorrow0
Actually here's what will work (CSS only). The part about the background image is a little confusing the way you explained it, but assuming you want to just center some images in the middle of the page...
Put all of the logos inside a two containing divs. For the margins of the individual logos, just have them set to auto, or whatever makes them line up correctly inside the containers.
Then for the first containing div, give it a negative vertical margin equal to half its height (ie, -100px if it is 200px tall). For the outer container, give it a vertical margin of 50% and a horizontal margin of auto. That should center your images both horizontally and vertically within the page.
- The key takeaway here being that while auto might not work vertically, percentage does.abettertomorrow
- Won't that align all the logos along their top edge rather than vertically center them?thatboyneave
- It would vertically align the container, then inside the container the logos are just aligned normally.abettertomorrow
- It's basically the same as Stugoo's second link above.abettertomorrow
- I think he wants to center the images vertically toothatboyneave
- face palmmydo
- thatboyneave0
What if you made the logos CSS background images and used background-position: center center; ?
- raf0
If CSS was meant to make things easier would we still able to charge what we do?
- Projectile0
@ abettertomorrow
no, not to the page. I want to center it to its surrounding div
so
<div background: url(imageofasquare.gif)>
<img logo.gif />
</div>the logo needs to be in the center of the square, which will be repeaded in a grid
- Stugoo's solution with display:table-cell looks promising. Or just extend the canvas size or all logos to the same...thatboyneave
- ... Same sizethatboyneave
- lukus_W0
- Won't work. Images are all different heights so that won't center them vertically...thatboyneave
- ...unless you individually specify the margins for each image.thatboyneave
- lukus_W0
Why can't you give each of the images the same height?
Don't make life difficult for yourself - be pragmatic.
- orrinward0
I like thatboyneave's method. Standardize the image size and use 50% positioning with a negative margin of half the width/height.
- 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!
- odds0
- 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?
- 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
- decisionman0
#mydiv {
position:absolute;
top: 50%;
left: 50%;
margin-left: -400px;
margin-top: -300px;
width:800px;
height:600px;}
- ETM0
CSS..call your id whatever you want, I used 'logoGrid':
#logoGrid { color: #000; }
#logoGrid ul {margin: 0; padding: 0;}
#CorpMembers ul li {
background: (insert you bg image)
list-style: none;
height: 120px;
width: 210px;
float: left;
line-height: 105px; << As mentioned above this should be tweaked and is likely not going to be exactly 120px.
vertical-align: middle;
}#logoGrid img {
border-style: none;
margin: auto;
}- ^ETM
- I likely made some errors doing that on my iPhone...but idea is there.ETM
- F*ck me... replace that errant CorpMembers ID with the logoGrid one.ETM
- thanks, will try thatProjectile
- 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?
- brodster0
no one is stopping you, center that div!