0

I'm trying to align 3 images along their bottom edge so it looks clean and even. I have 3 Images in a Div, and the Div is within a section. The section is positioned relative, with the Div positioned absolute, bottom: 0 so the images remain above the footer at the bottom of the page.

How do I get the bottom edge of the images to align as if on a flat line?

Note*:Ignore the inline styles, images are disproportioned so I had to inline style to fix them.

HMTL:

<section>
    <div class="logo-footer">
        <img style="width: 100px; margin-right: 40px" src="google.com/images/srpr/logo11w.png"/>
        <img style="width: 500px; height: 75px; " src="google.com/images/srpr/logo11w.png"/>
        <img style="width: 250px" src="google.com/images/srpr/logo11w.png"/>
    </div>
</section>

CSS:

.logo-footer {
display: -webkit-flex;
display: flex;

-webkit-flex-direction: row;
flex-direction: row;

-webkit-justify-content: center;
justify-content: center;

-webkit-align-self: center;
align-self: center;

height: 115px;

position: absolute;
bottom: 10px;
}

.logo-footer img{
margin: 0 50px;
}
pnuts
  • 58,317
  • 11
  • 87
  • 139
blackRob4953
  • 1,585
  • 2
  • 12
  • 15
  • your images have local paths and are not loading here – Sukrit Aug 18 '15 at 21:47
  • Just replace the local paths with https://www.google.com/images/srpr/logo11w.png – Zack Aug 18 '15 at 21:49
  • possible duplicate of [HTML image bottom alignment inside DIV container](http://stackoverflow.com/questions/6520940/html-image-bottom-alignment-inside-div-container) – Zack Aug 18 '15 at 21:53
  • It is a duplicate question, my apologies. One of my images has whitespace on the bottom and I didn't notice it. – blackRob4953 Aug 19 '15 at 01:08

1 Answers1

0

Set section position:relative , and div position:absolute, upside down you did it. Then set div bottom:0px or whatever you need.

Rodney Salcedo
  • 1,228
  • 19
  • 23
  • If I flip those 2, the images stay below the paragraph and there's white space until my footer. If I keep it the way they are, the images align along the bottom, but the bottoms of the images are on different levels, they aren't sitting on a line – blackRob4953 Aug 19 '15 at 00:57
  • Yes, it's a duplicate question – Rodney Salcedo Aug 19 '15 at 19:54