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
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
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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
ASKER
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
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
ASKER
"with divs" I meant "within divs"
ASKER
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
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
ASKER
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.
ASKER
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