How do you center an image of unspecified dimensions horizontally & vertically inside a div tag of unspecified dimensions... without using background images, javascript or tables? (CSS 2.1 + IE 8+). The div will also contain another div tag containing the image's caption. I'm assuming that the width of the image will be 450-600px and the height will be significantly smaller (350px or less).
Here is example code and image.
I can't use the answer here because it assumes that you know the dimensions of the DIV.
I think I'm halfway there, but now I need the div caption inside the div to be no wider than the image above it.
I'm doing this for epub ebook design and I can't know in advance how wide the image will be, but the div will cover the entire width of the screen. One issue I'm facing is that I assume I'll be viewing in 600x800 or 768-1024
I think the heart of my problem is that I would like an image scaling solution, but there's not a good css 2.1 solution for scaling image height. Failing that, I'd like to have a way to have my wide image centered in the screen. That's something I haven't yet figured out how to do.
Update: The epub standard supports only a subset of available CSS. I'm going to update my initial conditions to say that the wide image will have a width between 450-600 pixels.
2 answers
points
div.extra-wide-figure {
display: inline-block;
padding: 10px 0em 10px 0em !important;
vertical-align: middle;
width: 100%; }
div.extra-wide-figure img {
display: block;
margin: 0 auto;
}
div.extra-wide-figure div.caption p{ text-indent: 0em !important; text-align: center; font-style: italic; font-size: 0.8em; color:blue; text-align: center; margin: 5px 50px 5px 50px; }
I think this is what I want. The code example in action is here. There seems to be no way to fix the second line of the caption without first knowing the image dimensions. (Perhaps I could achieve this with a one column two row table where the image resides in a table cell).
It looks good on 800x600 and minimally acceptable on 1024x768. PS, I changed display to "inline-block" on the div in order to keep the subcomponents together on the same page.
point
This will centre the image:
div {
display: table-cell;
vertical-align: middle;
outline: 1px solid #ccc;
}
img {
display: block;
margin: 0 auto;
}
You'll also need a container element somewhere, in my simple example I just used the body element.
Image scaling ought to be possible with img { max-width: 100%; } but you'll have to make sure the container width is limited somewhere.
- This is a helpful solution, but the epub spec (and the kindle reader) only support a subset of the CSS. For example, it doesn't support outline http://idpf.org/epub/20/spec/OPS_2.0.1_draft.htm#Section3.2 . It does however support display: table-cell (news to me). I need to verify that Kindle supports table-cell for div tags. (Kindle is the worst, but actually if it weren't supported, I could live with that).
- I updated the original question with example code and included a reference to the caption which also seems to affect the overall css code. http://jsfiddle.net/8tEZb/7/
- I only added the outline to make it possible to verify the image was indeed in the middle of the cell (and outline, unlike border, doesn't interfere with the box model.
- Thanks. I did not know that!
