1

I can think of several ways to work around this, but my question is if I'm missing a way to do this natively.

I have a footer on my page. I want to display some text which is right aligned in the footer. But I also want the text center aligned vertically.

The immediate thought is to add some padding to the element, but if I decide to make the footer resizeable later that will break the design. There are some other CSS approaches that don't use native Flexgrid options.

The other idea is to put a div within a div (for example, any element) and then center the first align-content: center the first one and align-content: flex-end the interior one. Which works but is a little messy.

What I'm wondering however is if I can natively tell Flexgrid to align the content both to the right horizontally and centered vertically?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Todd Davis
  • 5,855
  • 10
  • 53
  • 89

1 Answers1

2

There is a CSS feature called Flexbox:

Here is a tutorial

Your code would look like this

.div-parent-element {

    display: flex; /* Make it flexbox */
    justify-content: flex-end; /* Align Right */
    align-items: center; /* Center Vertically */

}

The .div-parent-element is what your text is contained in

DannyV
  • 220
  • 1
  • 6