Vertical-align

jurjen
114 Posts
jurjen posted this 18 August 2015

Hi,

I created a container, containing two columns with a div in each column

col1: div with text
col2 div with picture

I would like to align the div with the text to the bottom, so the bottom of the textline is on the same level as the picture.

I would think that vertical-align bottom on col1, would be enough? But whatever I try with col1, row1, divtext, divimage. I just wont get it to v-align to the bottom.

I have tried doing what the text saysL col1: height:100% and divtext height=pixels same as image. display: block, inline block.

Vertical-align just is not working.

Any suggestions, examples on this?

Regards
Jurjen

Hi, I created a container, containing two columns with a div in each column col1: div with text col2 div with picture I would like to align the div with the text to the bottom, so the bottom of the textline is on the same level as the picture. I would think that vertical-align bottom on col1, would be enough? But whatever I try with col1, row1, divtext, divimage. I just wont get it to v-align to the bottom. I have tried doing what the text saysL col1: height:100% and divtext height=pixels same as image. display: block, inline block. Vertical-align just is not working. Any suggestions, examples on this? Regards Jurjen
wordpress bottom vertical-align
Vote to pay developers attention to this features or issue.
3 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 20 August 2015

Hi,

Could you please provide us with the screenshot that demonstrates what exactly you want to achieve?

The easiest solution is:

valign-bottom.png

result:

result-valign.png

I also remove spacing after of the text in Text control.

Thank you,
Olivia

Hi, Could you please provide us with the screenshot that demonstrates what exactly you want to achieve? The easiest solution is: !valign-bottom.png! result: !result-valign.png! I also remove spacing after of the text in Text control. Thank you, Olivia
valign-bottom.png
result-valign.png
jurjen
114 Posts
jurjen posted this 24 August 2015

Hi,

I got it working with Javascript. Flexbos is not working.

Regards
Jurjen

Hi, I got it working with Javascript. Flexbos is not working. Regards Jurjen
Stagger Lee
1818 Posts
Stagger Lee posted this 24 August 2015

Jurjen, see in my topic how to use Bootstrap classes in other blocks/controls. It is relatively easy.

In this case are custom fields but you could delete all PHP code and use pure HTML, Text, etc..

https://answers.themler.com/questions/18768/small-tutorial-custom-fields-inside-themler-bootstrap-row-columns-equal-height

Jurjen, see in my topic how to use Bootstrap classes in other blocks/controls. It is relatively easy. In this case are custom fields but you could delete all PHP code and use pure HTML, Text, etc.. [https://answers.themler.com/questions/18768/small-tutorial-custom-fields-inside-themler-bootstrap-row-columns-equal-height][1] [1]: https://answers.themler.com/questions/18768/small-tutorial-custom-fields-inside-themler-bootstrap-row-columns-equal-height
You must log in or register to leave comments