horizontal and vertical centering of an image - why is this so tricky?

Posted on 2008-10-23
Medium Priority
Last Modified: 2010-04-21
All of the examples I have seen for horizontally AND vertically centering an image in a DIV just don't seem to work in a page full of elements.  I can't get centering to work reliably without messing up something else on the page. In a page full of elements, already carefully balanced with CSS rules, I cannot apply rules that will affect the entire page.

So, why is this so tricky?

My question:

Starting from an existing DIV element with the class ReptilePhotoBox

   .ReptilePhotoBox {
      width: 150px;
      height: 200px;
      overflow: hidden;
      float: left;
      border: ridge white 2px;
      margin-right: 3px;
      margin-left: 3px;

I need that CSS in the .ReptilePhotoBox , and I have other images on the page (not in the .ReptilePhotoBox classed DIV) that I do not want centered - only the images within the ReptilePhotoBox  DIV should be centered horizontally and vertically.

So, can you do it? It is OK to add or subtract CSS from the .ReptilePhotoBox class, as long as the functionality already there still works. Plus, you can define the image (img) within the .ReptilePhotoBox :

.ReptilePhotoBox img {


Or, if you prefer, you can make the img fall within yet another DIV with its own class.

Can you do it? I bet you 500 points you can't ! :~)

Question by:dtleahy

Assisted Solution

mverschoof earned 200 total points
ID: 22784290
First off, funnyway to get someone to reply :D

Second, is there a online version or something to see the problem? maybe a screenshot? There are a lot of things that can make a difference.

The best way would be a online version because i could see the different div's and come up with a solution faster than guessing.

Cheers, Michael

Author Comment

ID: 22788275
Hi Michael,

First, I hope my challenge of "bet you can't do it" was seen as fun. I sure do appreciate the help of the experts who give their time here.

The ASP page it comes from is a new commercial site, and I'd rather not post a URL to it. I think it would also scare away many from helping, to be asked to wade through a page full of code. I'll try to post a pared down version  of the page. However, I know that some CSS gurus here can give me the scoop on horizontally and vertically centering images that works for them.

LVL 43

Assisted Solution

by:David S.
David S. earned 600 total points
ID: 22789024
CSS2 was designed to allow you to position things from top to bottom. It seems they didn't really consider vertical centering when they created it.

Perhaps these will help you:
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

LVL 44

Accepted Solution

scrathcyboy earned 1200 total points
ID: 22792269
first question -- "So, why is this so tricky? "
because the panels of supposed experts designing CSS2 were too myopic to realize that EVERYONE in the world will want to do this.   Blinders on = = bad product.  Surprise!  In CSS3, they still haven't got it yet !!!

"Can you do it? I bet you 500 points you can't ! :~)"

Nah, you can center ANY DIV you want, as long as you are prepared to go to extreme hacks to get around the mypoic design of CSS2.  Without getting into the details of what you want, if you want a challenge, assimilate all these different ways of doing it --


If that doesn't show you how to do it, ask for more

Author Comment

ID: 22799442
I am away from my computer for the weekend (out of town), so I won't be able to check out these solutions. But, scrathcyboy, Kravimir, and mverschoof, I sure do appreciate the replies.

Seems like many times when I have seen the "solution", it was on a totally stripped-down page, maybe even a page with just a single visible element on the page. What I really want is 2 rows of thumbnail images, and I need to have them within a tabbed interface. So, to have the two rows of boxes, I need to use floats for each box in the first row, then a clear, then another row of boxes.  I have the whole scheme worded out, and the only thing not working is the centering of all the thumbnail images within the boxes. It looks really stupid when they're not centered. If I can't get it to work any other way, I guess I'll insert a table {shudder} because I think I remember that centering within a table cell is easy.

Maybe CSS4 or CSS5 or CSS6 will provide a solution to the idiotic layout functionality that CSS1 through 3 could not. My granddaughter will have better tools to do web development, maybe. Yes, when CSS2 came out, I was amazed that the issues of creating a layout in a table-like fashion was still not addressed. Oh well, I have to work with whatever is available right now, and I will follow all those links to see if there is something there that will work.



Author Comment

ID: 22834336
I tried, and tried, many suggestions from the cited sites, and could not get thumbnail images of unknown dimensions to horizontally and vertically center properly with divs. Again, I see examples of it being accomplished, on very simple sample pages, but my more complex page in a different story. I want/ need something that looks just like a fixed size table 880px wide x 400px high, 2 rows, 5 columns. So, I have to use flots for the first row, then clear, then use floats on a second row.

You know, it just dawned on me that I could have used all position:absolute on every "table cell" (div) to create the look of a table.

But you know what, after several hours of screwing around with it, I used a table. And, it looks perfect, and the  thumbnail images of unknown dimensions horizontally and vertically center properly. (And simply formatted the table with CSS.)

What can I say - there's a lot to love about CSS, but centering images in a div ain't one of them.

I'll try to figure out who should get the points on this. I probably need CSS boot camp.

Thanks for trying.


Author Comment

ID: 22834345
"with divs" I meant "within divs"

Author Comment

ID: 23417395
Well, I feel badly having abandoned this question, and I don't honestly know if the solution that I finally took was somewhere within the citations listed, or not. I kinda doubt it, because I finally just decided it was one of the deficiencies of CSS (and CSS2!) and that it could be accomplished with invisible table cells, formatted with CSS. That's right, here we are in 2009, and I used a freakin' table! Here come the Holy Grenades of Antioch!

It simply wasn't worth the effort to design a CSS-only solution to the problem. So, I fixed the damn thing, and moved on.

scrathcyboy was 100% correct in his assessment:
first question -- "So, why is this so tricky? "
because the panels of supposed experts designing CSS2 were too myopic to realize that EVERYONE in the world will want to do this.   Blinders on = = bad product.  Surprise!  In CSS3, they still haven't got it yet !!!

I'm awarding points to all who tried to help. And, I do very much appreciate the help!


Author Closing Comment

ID: 31509104
I gave high grades because, well, why the hell punish these fine upstanding folks just because CSS is not very evolved yet - at least with some functionality.

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Suggested Courses
Course of the Month8 days, 15 hours left to enroll

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question