Menu icon Foundation
Align headline to bottom of div with equalizer

Hi Guys,
I am working on this webpage:

http://jirinosek.com/category/architecture

I would like to align headline of every project to bottom. Is there any way how to do it?

Image

<article class="project-view row" data-equalizer="">
                  <a href="/entry/vetrna-zahrada">
                  <div class="large-4 columns project-view-text" data-equalizer-watch="" style="height: 150px;"><h2 class="upper-case">Větrná zahrada</h2></div>
                  <div class="large-4 columns project-view-thumb end" data-equalizer-watch="" style="height: 150px;">     
                    <img src="/thumbs/150x150c/2015-03/1427401966_2.jpg" class="square">   
                   </div>
                   </a>
</article>
            

         

Thank you any help.

Josef :-)

Equalizerbottom align of text

Hi Guys,
I am working on this webpage:

http://jirinosek.com/category/architecture

I would like to align headline of every project to bottom. Is there any way how to do it?

Image

<article class="project-view row" data-equalizer="">
                  <a href="/entry/vetrna-zahrada">
                  <div class="large-4 columns project-view-text" data-equalizer-watch="" style="height: 150px;"><h2 class="upper-case">Větrná zahrada</h2></div>
                  <div class="large-4 columns project-view-thumb end" data-equalizer-watch="" style="height: 150px;">     
                    <img src="/thumbs/150x150c/2015-03/1427401966_2.jpg" class="square">   
                   </div>
                   </a>
</article>
            

         

Thank you any help.

Josef :-)

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

Vertically aligning on the web is not very easy unless you are using display: flex or table. If you don't have to support IE9, you can use display: flex;

.container {
  display: flex; /* or inline-flex */
  align-items: flex-start | flex-end | center | baseline | stretch;
}

You want baseline.

If you can't use flexbox, use display: table;

.container {
  display: table;
}

p {
  display: table-cell;
  vertical-align: bottom;
}

I live on CSS Tricks. You can learn more:
https://css-tricks.com/centering-in-the-unknown/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Josef Kortan over 4 years ago

And could you give me an example for this situation? I have tried what have said but it didn`t work for me.

Rafi Benkual over 4 years ago

Here is a simple media object where I've aligned the text to the bottom and removed the bottom margin on the p

http://codepen.io/rafibomb/pen/jERpXj

Josef Kortan over 4 years ago

Where? :)

Rafi Benkual over 4 years ago
Rafi Benkual over 4 years ago

Please hit the helpful button when people help you out, thanks! ;)

Josef Kortan over 4 years ago

Rafi, I love you :-). Thank you. It really helped.