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

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 ! :~)

Dennis
dtleahyAsked:
Who is Participating?
 
scrathcyboyConnect With a Mentor Commented:
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 --

webforumz.com/web-page-design/1679-tip-vertical-and-horizontal-centering-solved.htm
www.alt-web.com/Tutorials/hor_vert_center.html
perishablepress.com/press/2007/09/25/absolute-horizontal-and-vertical-centering-via-css/
www.webdesign.org/web/html-and-css/tutorials/horizontal-and-vertical-centering.9097.html
ww.joe2torials.com/view_tutorial.php?view=37
snipplr.com/view/741/horizontalvertical-div-align/
tutorials.alsacreations.com/centrer/
www.codeproject.com/KB/scripting/Centering_of__div__object.aspx
pmob.co.uk/pob/hoz-vert-center.htm
www.hicksdesign.co.uk/journal/how-to-vertical-centering-with-css
www.smartmenus.org/samples6/main-menu-position/relative/horizontal-centered/ 

If that doesn't show you how to do it, ask for more
0
 
mverschoofConnect With a Mentor Commented:
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
0
 
dtleahyAuthor Commented:
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.

Dennis
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
David S.Connect With a Mentor Commented:
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:
http://www.dynamicsitesolutions.com/css/vertically-centering-with-line-height/
http://www.dynamicsitesolutions.com/css/center-page-content-horizontally-and-vertically/
0
 
dtleahyAuthor Commented:
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.

Thanks,

Dennis
0
 
dtleahyAuthor Commented:
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.

Dennis
0
 
dtleahyAuthor Commented:
"with divs" I meant "within divs"
0
 
dtleahyAuthor Commented:
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!

Dennis
0
 
dtleahyAuthor Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.