4

I could use some help, aligning images (different sizes) at the middle of a container div. Have made a picture where you can see the div (the gray background) and that the images should align in the middle.

enter image description here

As you see, if the images are different in size, it will not look nice. How can I align all the images in the middle (vertical) so they are inline?

I'm not sure I can use position: absolute because I still want the images to resize itself (height: auto & width: 100%).

Html:

<div class="window column border small-12 medium-6 large-4 xlarge-3" *ngFor="#item of items">
            <div class="row">
                <div class="item-group">
                    <span>Fri fragt!</span>
                </div>
            </div>
            <div class="row">
                <div class="column small-12">
                    <div class="item-imagegroup">
                        <img src={{item.Image}} title="" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="column small-12">
                    <div class="item-descriptiongroup">
                        <div class="item-header">{{item.Header}}</div>
                        <div class="item-description">{{item.Description}}</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="column small-12">

                </div>
            </div>
            <div class="row">
                <div class="column small-6">

                </div>
                <div class="column small-6">

                </div>
            </div>
        </div>

CSS:

.item-imagegroup {
    text-align: center;
    padding-top: 1rem;
    height: 350px;
    background-color: grey;
    vertical-align: middle; 
}

.item-imagegroup img {
    width: 100%;
    height: auto;
}

.item-image {
    margin-top: 1rem;
    margin-bottom: 1rem;     
}

Have made the div fixed, so the text under also will be aligned. Not sure if there is a better solution here.

Hope someone can give me some advice.

Mikkel
  • 1,771
  • 11
  • 35
  • 59

2 Answers2

3

You could try

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

This should work, assuming you aren't looking for legacy support.

Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Dave
  • 66
  • 3
2

vertical-align works only with tables try to make a wrap div and give it "display: table;" and to the div that wrap the img give: "display: table-cell"

Don't forget to make all of it 100% width&height

EDIT:

HTML:

<div class="item-imagegroup">
    <div class="item-tablecell">
        <img src={{item.Image}} title="" />
    </div>
</div>

CSS:

.item-imagegroup {
    display: table;
    width: 100%;
    text-align: center;
    padding-top: 1rem;
    height: 350px;
    background-color: grey;
}

.item-tablecell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
Shon Levi
  • 148
  • 3
  • 13