Menu icon Foundation
Middle and Bottom Alignment Not Working For Media Objects

Here is some code using media objects

<div class="media-object">
  <div class="media-object-section">
      <img src= "http://via.placeholder.com/150x150" />
  </div>
  <div class="media-object-section middle">
      <img src= "http://via.placeholder.com/50x50" />
  </div>
  <div class="media-object-section bottom">
      <img src= "http://via.placeholder.com/75x75" />
  </div>
</div>

Everything aligns on top no matter what alignment I specify. It appears that the same thing is happening on the document page for media objects. I am using version 6.4.1 of the Zurb Template.

media objects

Here is some code using media objects

<div class="media-object">
  <div class="media-object-section">
      <img src= "http://via.placeholder.com/150x150" />
  </div>
  <div class="media-object-section middle">
      <img src= "http://via.placeholder.com/50x50" />
  </div>
  <div class="media-object-section bottom">
      <img src= "http://via.placeholder.com/75x75" />
  </div>
</div>

Everything aligns on top no matter what alignment I specify. It appears that the same thing is happening on the document page for media objects. I am using version 6.4.1 of the Zurb Template.

Andrés Mejía about 2 months ago

I solved it by setting

$global-flexbox: false;

in my SASS file.

George Benthien about 2 months ago

Setting

$global-flexbox: false;

does solve the problem, but it doesn't seem like that should be necessary.