CSS Alignment

The text-align CSS property is responsible for the horizontal arrangement of content inside a block element or table cells. Left text alignment is one of the most popular types, which pushes content to the left edge of a container.

Flush left alignment is the safest and most popular choice for large paragraphs of text as it enhances the readability and feels natural for users who read from left to right.

The right-aligned text sticks to the right edge of a page or container. For that matter, we use the text-align property with the right value. The most basic syntax goes like this:

{

text-align: right;

}

Right alignment is one of the least common types as it takes too much effort for users to scan and consume.

In turn, it can be helpful for headlines or short messages for creating a unique or "offbeat" look and feel. Indeed, in languages with right-to-left scripts, like Arabic, Hebrew or Urdu, flush right alignment is the first choice to maintain readability.

We use the text-align property with the center value for placing text on the center axis of the page. This is a centered text alignment.

Centered alignment is a trap for designers who want to achieve a more organized and symmetrical composition. Instead, the page often ends up looking boring with no visual interest. This type of alignment is a good fit for headlines or short pieces of text. Applying it to large paragraphs makes it hard for users to read and follow.

For applying a justified alignment, we use the text-align property with the justify value. It makes lines of the same length, stretching out those with fewer characters and reducing the space for lines with more characters.

This type is generally common for newspapers, books, and other published materials. The only complication here arises when individual words are too long, or the columns are too narrow. As a result, the text ends up having large hideous gaps of blank space. To fix this situation, try making lines longer or words shorter or apply the smaller font.

The vertical-align property controls the alignment of elements placed next to each other on a line. That's why you can apply it only to inline or inline-block elements or elements inside table cells.

The baseline value is the default alignment of elements. From the typography theory, you might know the baseline is the invisible line the text sits on. So, the vertical-align: baseline; aligns the baseline of the child element with the baseline of its parent.

The vertical-align: top; declaration aligns the top of elements with the top of the entire line. Take a note, the top of the line isn't the same as the highest point of text — the line usually includes margin.

Vertical top alignment is a good choice for comparing multicolumn content, like pricing plans or product features. It provides better scannability and helps users assess options better.

The middle value of the vertical-align property aligns the middle of the elements with the middle of the parent's x-height. For reference, the x-height is the height of the text without the character ascenders (the upper strokes in letters like f, t, b, or h) and descenders (the lower strokes in letters like q, y, or j).

This type of alignment is rather common for aligning avatars with their names.

The vertical-align: bottom; CSS declaration applies the bottom alignment. This type of alignment evens up the element's bottom with the bottom of the entire line. Bottom-aligned elements stick to the bottom of their container along the invisible x-axis, even when its height increases.

When it comes to centralizing elements, web developers use the margin property, which, unlike padding, can have the auto value. The margin:auto; declaration makes the element take up the specified width, while the remaining space gets equally divided between the left and right margin.

You can center elements, using the margin property. You take both individual margin-left and margin-right properties and set them to the auto value. What happens when you apply this value only to the left or right margin? The element is pushed to the opposite side of the container, while the left/right margin receives a large share of the unused horizontal space.

The float property makes a block-level element float on its container's left or right side, while text and inline elements wrap around it. You must have seen such alignment in print layouts where photos and other graphic elements are aligned to one side while the text flows naturally around them. The property seems like no sweat. But what if there are several floated elements with the same alignment type — for example, float: left;?

Instead of stacking on top of each other like elements of the normal flow, the next element sticks to the left of the previous block until there's room. Then, they would wrap to the next line. It makes the float property a perfect tool for creating traditional multicolumn layouts.

The position: absolute; declaration allows us to modify the position of an element. It removes the element from the document flow so that other elements behave like absolutely positioned elements don't exist and affect them, even when they touch.

The element takes the position relative to its closest positioned parent element, but you can set the element's offsets to specify its position. In the example, a button has the offset property declaration of right: 40px;, positioning it precisely 40px from the right of the document. As you resize the browser, the button will stay in its place no matter what.

The correct value is middle. This type of alignment is the most common for positioning avatars with their names. The avatar and its label are beaded on an invisible line that goes through the middle of the element and text's x-height, equal to the half-height of lowercase letters.

The float property allows us to move an element as far left or as far right as you need in the container while the rest of the content wraps up around the image. It's also recommended to set the element's width. Otherwise, the image or other element will span over the entire width of the container, and float properties won't be visible to users.

The correct answer for applying such alignment is the text-align property with the justify value. Justified text has all lines of the same length. Lines with fewer characters stretch out, increasing the space between words, while those with more characters tend to shrink. The only exception is the last line which doesn't need to be spaced to line up with the right edge.