To Align an image to the bottom of a div you can use css:

div img.thing {
position: absolute;
right:0;
bottom:0;
}


Thanks for posting Rafi. I've been searching for a solution to a similar problem. This just makes the column taller when I tried it. I applied the class of thing to my image and even tried wrapping the image in a div class="thing", and also tried applied class of thing to the column.

What am I doing wrong?

The only way I can prevent the column from getting taller is by doing the following. But the code below causes the image to rest on the top of the containing div — not rest on the bottom and extend above.

.mylogo {
  overflow: visible;
}
.mylogo img.thing {
  position: absolute;
  right:0;
  bottom:0;
}

  <div class="large-4 large-pull-8 columns show-for-large-up mylogo">
    <a href="[[~3]]" title="Home Page"><img src="/assets/site_graphics/logo.png"  class="thing"></a>
  </div>

This seems to be working better. A straight 0 with no measurement definition has no affect. Adding em and just working from the top and applying a negative em allowed for more accurate positioning.

Not sure if this is the best way or not. I would be happy just to have absolute centering vertically.

No sure also that right:0; has any affect. My instinct would be to either remove and hope for align left by default, or set left and right to auto.

.mylogo {
  overflow: visible;
}
.mylogo img.thing {
  position: absolute;
  right:0;
  top:-2em;
}

<div class="large-4 large-pull-8 columns show-for-large-up mylogo">
    <a href="[[~3]]" title="Home Page"><img src="/assets/site_graphics/logo.png"  class="thing"></a>
  </div>