Menu icon Foundation
Equal height buttons and text boxes

How can I get equal height button as well as (div) text boxes regardless of the line height of the content?

 

I am building columns of <img> icons with clickable buttons below them. Some buttons have 2 lines of text and some dont. How can I get the buttons with one line to center the text and make the button the same width as the rest.

 

 

button height

How can I get equal height button as well as (div) text boxes regardless of the line height of the content?

 

I am building columns of <img> icons with clickable buttons below them. Some buttons have 2 lines of text and some dont. How can I get the buttons with one line to center the text and make the button the same width as the rest.

 

 

Rafi Benkual over 3 years ago

You might create custom buttons with the display: table trick. Otherwise flexbox would be another way to go.