Solved

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

Posted on 2008-10-23
9
1,041 Views
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 ! :~)

Dennis
0
Comment
Question by:dtleahy
9 Comments
 
LVL 5

Assisted Solution

by:mverschoof
mverschoof earned 50 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
0
 

Author Comment

by:dtleahy
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.

Dennis
0
 
LVL 42

Assisted Solution

by:David S.
David S. earned 150 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:
http://www.dynamicsitesolutions.com/css/vertically-centering-with-line-height/
http://www.dynamicsitesolutions.com/css/center-page-content-horizontally-and-vertically/
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 300 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 --

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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:dtleahy
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.

Thanks,

Dennis
0
 

Author Comment

by:dtleahy
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.

Dennis
0
 

Author Comment

by:dtleahy
ID: 22834345
"with divs" I meant "within divs"
0
 

Author Comment

by:dtleahy
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!

Dennis
0
 

Author Closing Comment

by:dtleahy
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.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

743 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now