For a table, the values of vertical-align are relative to the row height of the table and for inline elements, for instance, a line of text, the values of vertical-align are relative to the line-height of that text.Īs you can see, the parent element is given a display: table property so that the child element can be aligned like a cell. Vertical align works well with tables and with inline elements. Yet, for some reason, if you are unable to use the flexbox, you can try the vertical-align property. If you don’t care about IE11 and below, this should be your first choice. The most easiest way to center elements vertically is by using the flexbox layout. But there are several ways you can handle this depending on your layout and intended browser support. The outcome of both of these (stacked items/ inline items) can be seen hereĪligning items vertically can sometimes be a tricky thing to do. If you wish to display the blocks inline, then you can simply use display:inline on the child elements and use the text-centering technique on the parent. Using Margin: 0 auto for Block Level Elementsīy setting the left and right margins to a value of auto, we can have block level elements stack on top of each other. Partial support exists for IE11, Nonetheless, there is good support with MS Edge. Since block level elements are not inline, we can make them inline using flexbox and then centering the content.įully supported across all browsers except IE10 and below which doesn’t support flexbox layout at all. For Block level elements we take the following approach. The caveat to this technique is that it works only with Inline elements like text, links, etc. To the parent element and you have a result as shown below.

This is the most simplest way to center elements horizontally and is fully supported by all browsers. Using text-align:center for Inline Elements Center elements HorizontallyĬentering elements horizontally is a fairly easy thing to do. Well, no more! There are several ways to center items, be it horizontally or vertically or both, of which I present 13 unique ways categorically and in order of their simplicity. Designers seem to be troubled time and again while centering items in their layout.

Align text vertically center flex