Skip to main content
FreddieMac.com

Vertical Centering

Examples of components using vertical centering.

Block Grids

On a Block Grid, add class  .align-middle to vertically center align the content.

This example uses a Copy Callout Card (using white background, small-to-large padding, and no bottom margin) next to a full width image.

placeholder

America relies on Freddie Mac

Since being chartered by Congress in 1970, we have fulfilled our mission to keep mortgage money flowing, support the stability of the housing market, and promote housing affordability. 

For comparison, this block grid uses a plain WYSIWYG next to a full width image, so there is less white space to the left and right of the text.

America relies on Freddie Mac

Since being chartered by Congress in 1970, we have fulfilled our mission to keep mortgage money flowing, support the stability of the housing market, and promote housing affordability. 

placeholder

For either concept, the text and image could be in either position, and you can add more than 2 subcomponents.

outside view of office building

When using more than one image, make sure they have the same aspect ratio.

Family on couch

Column Container

The column container can accomplish the same layouts as above, as well as having columns of different widths, or offsets, or backgrounds.

This example uses a Copy Callout Card (using white background, small-to-large padding, equalize height, and no bottom margin) next to a full width image. The columns are using the custom class options:

  • Column 1 uses medium-3 align-self-middle large-offset-1
  • Column 2 uses medium-7 align-self-middle
cat placeholder

America relies on Freddie Mac

Since being chartered by Congress in 1970, we have fulfilled our mission to keep mortgage money flowing, support the stability of the housing market, and promote housing affordability. 

The align-middle class doesn't work on all components, such as those where the visible content is nested inside something that isn't visible. An example would be the Chevron Callout Card -- the middle alignment option is ignored by the anchor tag that goes around the callout. In this type of situation, you can solve by using align-self-middle on the column instead.

  • Both columns use medium-6 align-self-middle

Offset Media Panel

Text is vertically centered in either style of offset media panel.

America relies on Freddie Mac

Since being chartered by Congress in 1970, we have fulfilled our mission to keep mortgage money flowing, support the stability of the housing market, and promote housing affordability. 

placeholder

America relies on Freddie Mac

Since being chartered by Congress in 1970, we have fulfilled our mission to keep mortgage money flowing, support the stability of the housing market, and promote housing affordability.