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

0
points
This was chosen as the best answer

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.

Answered over 3 years ago by Robert Nagle
1
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.

Answered over 3 years ago by Rob Crowther
  • 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). Robert Nagle over 3 years ago
  • 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/ Robert Nagle over 3 years ago
  • 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. Rob Crowther over 3 years ago
  • Thanks. I did not know that! Robert Nagle over 3 years ago