Clever Geek Handbook

Vertical alignment of bottom sections with different text sizes

Inside a flexible border, how can the bottom edges of the text be vertically aligned in two different divs with two different font sizes?

Here is a very simple jsfiddle: http://jsfiddle.net/aegh74dr/1/

You will notice that the two divs in the flex box contain different font sizes. The attribute align-items

matters flex-end

, but the two different divs are not aligned at the bottom.

Thank!

+3


source to share


2 answers


You can use:

align-items: baseline;

Using a value such as a baseline allows you to align elements, such as aligning their original lines.


As Mozilla Developers Networks describes align-items: baseline;

:



The baselines (leading edge or trailing edge depending on the flex-direction property) of all flex items are aligned with each other. The flex item that takes up the most space, perpendicular to the layout axis, follows the flex-start rule. The baselines of all other elements are then aligned with the baseline of that element.

DEMO http://jsfiddle.net/a_incarnati/aegh74dr/2/

+2


source


I managed to get them to match this:



div.large {
    font-size: 32px;
    height: 32px;
}

div.small {
    font-size: 16px;
    line-height: .92em;
    height: 16px;
}
-1


source






More articles:


All Articles