Help me, I'm vertically challenged.

This is a question about controlling vertical positioning within a DIV.

I've got a thin wide web page (just something that fits in an IFRAME) It looks like a strip of 35mm film, just so you know. I want to place four images that have been previously appropriately scaled side by side on the page. Although the images have been scaled so that their widths are exactly the same, their heights may differ. What I want to do is have the images center vertically. I have pre-defined four DIVs, one for each image:

Code:

---

<STYLE>
.image1 {position: absolute; top: 24px; left: 22px; width: 166px; height: 249;
        vertical-align: middle; overflow: hidden;}
.image2 {position: absolute; top: 24px; left: 210px; width: 166px; height: 249;
        vertical-align: middle; overflow: hidden;}
.image3 {position: absolute; top: 24px; left: 398px; width: 166px; height: 249;
        vertical-align: middle; overflow: hidden;}
.image4 {position: absolute; top: 24px; left: 586px; width: 166px; height: 249;
        vertical-align: middle; overflow: hidden;}
</STYLE>

<div class="image1"><img src='aaaa'></div>
<div class="image1"><img src='bbbb'></div>
<div class="image1"><img src='cccc'></div>
<div class="image1"><img src='dddd'></div>

---

For some reason when I display the page, the images appear at the top. I would have thought that the vertical-align: middle would have set whatever content in the middle. Any ideas on how I can vertically center these? &thanks.

cudabean

Note that specific a height without specific units (px) is invalid CSS and some browsers will ignore this height (those that conform to the CSS spec).

Anyway, try "margin: auto;" - I believe that is supposed to be the correct way to center things. You can also split it "margin-top: auto; margin-bottom:auto;" or "margin-left: auto; margin-right; auto;".

Hmmm,

Thanks for the response, JoshT. It sounded logical, promising even, but it still didn't work. (I just tried margin: auto;) Also, I added the units as you suggested.

Any other ideas? What about (choke!) tables?

cudabean

I don't think margin: auto will have an affect with absolutely positioned elements. I think they have to be block elements in the normal flow (relative).

Also, auto margins will eat up the space left after borders and padding are considered. So you can make sure the element's borders aren't to big, and the element's parent's padding isn't too big.

Still trying to automatically center an image vertically within a small absolutely positioned <div>.

I tried following CiberThuG's advice. When you say "block elements in the normal flow", does that completely exclude <img's>? Since they are not technically block elements?

In interpreting your suggestion, I thought I would create two nested <div's>, the outer one with the absolute positioning and an inner one with relative positioning. The outer one defines the larger area and the inner one would hopefully have some wiggle-room, i.e. centering ability. This didn't work either, alas.
Here's the code:

Code:

---

<STYLE>
.if0 {position: absolute; top: 18px; left: 8px; width: 125px; height: 125px; overflow: hidden;}
.image0 {position: relative; margin: auto;}
</STYLE>

<div class="if0">
  <div class="image0">
    <img src=...>
  </div>
</div>

---

Thanks,

cudabean

Quote:

---

Originally posted by Cudabean
I tried following CiberThuG's advice. When you say "block elements in the normal flow", does that completely exclude <img's>? Since they are not technically block elements?

---

I don't know if img tags are block or inline. If they are not block, then yes, they would be excluded. But you can place them inside a div.

I will try and look up some more information shortly. I know you can do what you want, but I don't remember how. I just know I've read it somewhere at the W3C.

Aren't img tags considered "replaced"?

Okay, I'm trying to work on an example to do what you want, in the meantime...

In the example in the first post, why are all the divs the same class?