0

Anyone who can tell me how to vertically align an image in a DIV without a fixed height for the container DIV? With a fixed height I can do this:

HTML

<div class="views-field-field-thumbs-accessories">
    <div class="sensorimage">
        <a href="/accessory/bag-15">
            <img width="120" height="120" title="Bag" alt="Bag" src="http://localhost/sites/default/files/thumbs/bag.jpg" typeof="foaf:Image">
        </a>
    </div>
</div>

CSS

.sensorimage {
    height: 100px; /* max-height does not work*/
    min-width:190px;
    position: relative;
    margin-bottom:10px;
}

.sensorimage img {
    max-height: 100%;  
    width:auto; 
    position: absolute;  
    top: 0;  
    bottom: 0;  
    margin-bottom: auto;
    margin-top: auto;   
}

This gives me almost what I want. The images are vertically centered in the DIV. But since the DIV with the class .sensorimage must have a fixed height, certain images appears too small. I want the images to have their natural height and width. I have tried with "max-height" but that hides all images for some reason. I have also tried to fiddle with display:table for the outer div and display:table-cell and vertical-align:middle for the image (or the inner div), with no luck. Anyone?

Edited: for ex. if 2 images are 30 px high and one image in the same row is 100 px high, the smaller images should still be vertically centered.

enter image description here

TBJ
  • 407
  • 4
  • 19
  • 1
    Sorry, that was a wrong dupe target. But it's a dupe. Kindly refer to [**Centering in CSS: A Complete Guide**](https://css-tricks.com/centering-css-complete-guide/) – Praveen Kumar Purushothaman May 16 '16 at 07:54
  • Well, since Praveen linked you to a horizontal centering duplicate in which you won't find your answer, and I assume you don't want to read the entire CSS documention to find it, the way you need to think is like this: The parent div has no width and no height without any elements inside it. If you add an image inside it, the parent div has the width and height of the image (so it's kind of centered). So the question is this: If not a fixed height, what makes your div be taller than your image? – iuliu.net May 16 '16 at 09:13
  • See my edit. The highest image in a row should set the height for all divs in a row. The rows are table rows, but the image is not contained in it's own cell. Image and title and description text shares the space in each td. – TBJ May 16 '16 at 10:49

0 Answers0