How do I align spans or divs horizontally?

html

responsive-design

css-grid

flexbox

byNikita Barsukov·Jan 26, 2025

For horizontal alignment, use CSS Flexbox. By applying the display: flex; rule to your container, child elements (spans or divs) will be arranged side by side.

.container { display: flex; }  /* Simplicity is the ultimate sophistication, right? */

<div class="container">
  <div>First</div>  /* Like a first child, leading the way. */
  <div>Second</div>  /* Being the sandwiched middle child. */
  <div>Third</div>  /* And the baby of the div family! */
</div>

With flexbox, your elements are lined up swiftly with minimal code.

Display property to the rescue!

Choose the right display type. While flexbox handles most alignment needs with aplomb, there are times you might prefer inline-block or grid based on the complexity of your layout.

Inline-block

div {
  display: inline-block; /* Inline, but still likes to block. 😄 */
}

With inline-block, margins and paddings are respected. However, watch out for the extra spacing between elements due to white space in your HTML.

CSS Grid

For intricate design needs, a Superman is there - CSS Grid. With its versatile properties like grid-template-columns and column-gap, it provides precision control:

.container {
  display: grid;  /* Entering GRID mode! */
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px; /* Everyone needs a little personal space. */
}

Aligning elements using Flexbox

The power of flexbox doesn't stop at just lining things up in a row. It’s got some cool properties like justify-content and align-items to nail the perfect arrangement.

Equal spacing

With the power of justify-content, you can space your elements evenly:

.container {
  display: flex;
  justify-content: space-between;  /* It's like Adulting: giving everyone their space. */
}

Vertical centering

To vertically center elements, shift your gaze to align-items:

.container {
  display: flex;
  align-items: center; /* This is like a yoga class for your divs. */
}

Embrace responsiveness with media queries

For ever-changing screen sizes, use media queries to adjust your layout. Aim for a layout that is as flexible as a gymnast.

@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Stack up folks, it's a mobile device! */
  }
}

Control the Chaos: Clear floats

Be it the party-animals aka floats or break-dance aka overlapping, it can wreak havoc on your layout. Clearfix hack is your party controller.

.clearfix::after {
  content: "";  /* Shhh! You saw nothing. */
  clear: both; /* The bouncer that kicks out unruly floats! */
  display: table;
}

But if flexbox or grid is handling your alignment, you can safely let go of clear: both;.

CSS Frameworks and Conflicts

VA framework like Bootstrap offers in-built classes (.d-flex or .row) for alignment. However, always be vigilant for any conflicting CSS that may override your artistry.