Display & Centering: Center Inline Content

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

This is a horizontal alignment task, so avoid flex unless vertical alignment is explicitly required by the prompt. Use text-align for inline/inline-block content, watch edge cases like wrapping and whitespace gaps, and test with long labels; trade-off vs flex when only horizontal alignment is needed.

Solution

Overview

text-align affects the inline formatting context, so it’s the simplest way to center inline content without changing document flow.

Approach — text-align Center + Inline-Block Chips

Add that inline-block items respect line-height, so you can adjust vertical alignment with line-height or vertical-align if needed. If the design is sensitive to whitespace gaps, remove them with HTML formatting or font-size: 0 on the parent.

<html>

<div class='box'>
  <h2>
    Centered Content
  </h2>
  <p class='chips'>
    <span class='tag'>
      HTML
    </span>
    <span class='tag'>
      CSS
    </span>
    <span class='tag'>
      UI
    </span>
  </p>
</div>

# CSS

.box {
  background: #222;
  color: #fff;
  padding: 20px;
  border: 1px solid #444;
  border-radius: 10px;
  max-width: 600px;
  margin: 0 auto;
}
.chips {
  text-align: center;
  margin-top: 12px;
}
.tag {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 6px;
  background: #e63946;
  color: #fff;
  margin-right: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.tag:last-child {
  margin-right: 0;
}

Notes & Pitfalls

Pitfalls

Only inline-level content is centered by `text-align`. Blocks ignore it unless they are inline or inline-block.
Forgetting to remove the last chip’s right margin causes visual imbalance.

Techniques

Use `inline-block` for chips to keep a single line while allowing padding and border radius.
`text-align: center` on the wrapper is a simple, widely supported centering method for inline content.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep