HTML5 / CSS3 Horizontal and Vertical Alignment

This article covers how to align sentences, paragraphs, and boxes containing paragraphs in a visually pleasing way using HTML and CSS.

We will look at two methods for centering alignment on the horizontal and vertical axes.

Method 1.

display: table // display: table-cell // vertical-align: middle

Before diving into vertical alignment, let's first take a look at the vertical-align property. The vertical-align property is one of the vertical alignment properties.

[ What is vertical-align? ]

1. It is a property that specifies the vertical alignment method.
2. It specifies how inline/inline-block elements are vertically aligned.
   vertical-align: baseline / top / bottom / middle / sub / super / text-top / text-bottom / length values / percentage values
   ( Note: It cannot be applied to block elements )
3. However, it can be used with table-cell. When used, it can align to top, middle, bottom, etc. Let's look at an example below. vertical-align used with table-cell (basic)

Looking at the second point in [ What is vertical-align? ], it is specified that it cannot be applied to block elements.

However, it is possible to align block elements using vertical-align. Let's look at the next example.

In the example above, the parent is the container class and the child is the wrapper class. For reference, the <div> tag is a block element. Let's vertically center-align the two block elements using CSS.

display: table // display: table-cell // vertical-align

This method uses display: table and display: table-cell // vertical-align: middle. Instead of using a <table> tag, we create a table-like structure using display: table.

First, by applying display: table; to the container class, a table is formed. Then, by applying display: table-cell and vertical-align: middle to the child wrapper class, we can center-align it vertically.

The important point here is to follow the rule of display: table for the parent class and display: table-cell and vertical-align: middle for the child class. This ensures vertical center alignment.

If you want to align it to the top or bottom, you can change the value of vertical-align from middle to the desired value, such as top or bottom.

Additionally, if you want to horizontally center an element, refer to the example below.

Looking at the HTML example, the <h1> and <p> tags are block elements, but they are text-handling tags. The text-align property is a text alignment property that can only be applied to text elements. Therefore, by applying text-align: center to the container or wrapper class, horizontal center alignment is easily achieved.

The next example demonstrates how to horizontally center a block element that is not a text element. In this example, the <h1> and <p> text tags are replaced with a block element <div> tag with the class box.

By using margin: auto on the block element box class, the top and bottom margins are set to 0 and the left and right margins are set to auto. The left and right margins will automatically adjust to be the same, making it appear as though it is horizontally centered.

In this way, block elements can be horizontally centered using margin.

Method 2.

display: flex // display: inline-flex // align-items: center // justify-content: center

Assuming you are familiar with flex, I will explain here.

The following is an example of center alignment using display: flex to center along the cross axis. Center alignment using flex.

When display: flex or display: inline-flex is applied to the parent class container, and align-items: center is used, it will easily center-align along the cross axis. To center-align along the main axis, justify-content: center can be used to easily achieve horizontal center alignment as well.

Remember that when using flex for alignment, all necessary properties must be applied to the parent element.

We have now covered two methods for horizontal and vertical center alignment. It cannot be definitively said that one of these two methods is easier or more convenient. The best approach is to choose the appropriate method according to your situation and apply it accordingly.