CSS Alignment Made Simple

Photo by Ashkan Forouzani on Unsplash

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

Therefore, the purpose of this article is to make some features of CSS much easier to understand.

The thing I want to address now is the alignment of the elements.

Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.

The cornerstone of most CSS things, including this one, is the box model.

With this in mind, we can split the use case into two categories. The first is when we have a box (container) and we want to arrange all the elements inside in the same position. The second is when we have a container and we want to change the position for one element without affecting the others.

The difference between these two categories is that in the first we apply CSS rules on the box (container), and in the second we apply on the child element.

Positioning elements inside a container

For positioning the elements inside a container, flex-box is the handiest. It is easy to use and comes with cross-browser support.

Case I

A common scenario involves something like a navigation in which we want to center all the elements vertically.

To be more precise, we want to move from what we have in the first image, to what we have in the second image.

From this

To this

For this, we can display the container as a flex-box and make use of the align-items property.

align-items is the property that defines the behavior for how flex items are laid out along the cross axis on the current line.

RAW

Case II

Continuing with the example above, we now have our elements centered on the cross axis, but we want to divide the content. We want to have the logo and the headline on the left part and the navigation button on the right.

From this

To this

The easiest way to do this is to add the contents of each section inside a wrapper and set the flex property on the wrapping element on the left. This will cause the left wrapping element to expand and take up the entire available width.

Wrap each section inside a new element

Here is the correspondent in HTML and CSS.

Left — Right

If you are wondering why the section on the left is a flexible box and has the same properties as nav, then check the next scenario, which is very similar to the first.

Case III

In this scenario, we have a pair of two elements and both or at least one is displayed in block mode, and we want to display them in inline mode.
In other words, we have two elements one below the other and we want to display them one after the other.

From this

To this

The solution is to add them to a container and use the same rules as above: display:flex and align-items:center (this one is optional and you can use it if you want to center them on cross axis )

Place them inside a wrapping element

Case IV

Another common alignment option is to have everything centered both horizontally and vertically.

Center on both X and Y-axis

Similar to align-items we have justify-content.

• align-items — used to define the alignment on the cross axis (Y-axis)
• justify-content — used to define the alignment on the main axis (X-axis)

Source

The CSS and HTML code for this can be the following:

Left - Right

Positioning a specific element inside a container

The second category has fewer use cases and usually happens when we want to center an item inside a container, but different from the rest of the content.

Let’s start from the following example:

We have a spinner, which indicates that something is in progress and after a while, the spinner disappears and the content is displayed.

The text has no specific alignment, only the spinner. Thus, we only have to manipulate the spinner without affecting the other elements.

In such cases, the handiest CSS rules are position, left/top, and transform.

We will first try to center it on the X-axis, then on the Y-axis, and finally on both.

The HTML for this spinner is the following:

RAW

Center on X-axis

For centering on X-axis I will add a class named center-x on the wrapping div element with these rules.

RAW

Here’s what each of them does:

• position:relative — required, because we want to position the element relative to its normal position
• left:50% — to set the left edge position in % of containing element
• transform: translateX(-50%) — to move the item in the opposite direction (left) by half its width

Since left:50% sets the position from which to start drawing the element on the page, that is, half the width of our parent(50%), it will look like this:

The element’s left edge is 50%

In order for it to be centered, we must move it with half its width on the opposite side.

These CSS rules will reflect in the following update:

Centered on X-axis

Center on Y-axis

To center it on Y-axis we just need to switch from left to top and from translateX to translateY .

RAW

And the update on the UI…

Center on Y-axis

Center Both Axis

Finally, to center it on both axes, we need to combine both of the above CSS rules.

RAW

Here position:relative can be replaced by position:absolute if we have other content that can affect the position of the element, that we try to center. But because during loading we don’t display anything other than the spinner, we can use relative position.

Centered on both axes