Menu
Within a flex box, how can I vertical-align the bottom edges of text in two different divs with two different font sizes?
Here is a very simple jsfiddle: http://jsfiddle.net/aegh74dr/1/
You'll notice that the two divs within the flex box contain font of different sizes. The align-items attribute is set to flex-end, but the two different divs do not align at the bottom.
Thank you!
223
Answer: Use the CSS line-height property Suppose you have a div element with the height of 50px and you have placed some link inside the div that you want to align vertically center. The simplest way to do it is — just apply the line-height property with value equal to the height of div which is 50px .
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
1 Select the text you want to center between the top and bottom margins. 2 On the Page Layout tab, click the Page Setup Dialog Box Launcher. 3 Select the Layout tab. 4 In the Vertical alignment box, click Center 5 In the Apply to box, click Selected text, and then click OK.
To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.
You can use:
align-items: baseline;
Using a value like baseline allows the items to be aligned such as their baselines align.
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 occupies the most space, perpendicular to the layout axis, follows the flex-start rule. The baselines of all remaining elements are then aligned with the baseline of this element.
DEMO http://jsfiddle.net/a_incarnati/aegh74dr/2/
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
