Add centered text to the middle of a horizontal rule

html

responsive-design

css

flexbox

byAlex Kataev·Jan 3, 2025

Insert text within a horizontal line using a span within a div, tailor-made with CSS. Apply position: relative; and padding on the text to center it above a border-top acting as the rule. Here's a fine-tuned snippet:

<div style="text-align: center; position: relative;">
  <span style="background: #FFF; padding: 0 10px; position: relative; top: -0.5em;">
    Centered Text
  </span>
  <hr style="border: 0; border-top: 1px solid #000; margin-top: -0.5em;"/>
</div>

This solution delivers centered text within a full-width horizontal line, creating an easily-recognisable design component.

The Flexbox revolution

When it comes to responsive design, there is no beating Flexbox. By setting a div as container and applying display: flex; justify-content: center; align-items: center;, you end up with a flexible and responsive design:

<!-- Every CSS developer's dream code -->
<div style="display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #000; height: 50px;">
  <span style="padding: 0 10px; background-color: #FFF;">
    Centered Text
  </span>
</div>

With Flexbox, there's no need for position or top values — the text centers itself like a well-disciplined monk!

The touch of pseudo-elements

For a touch of flair, conjure up :before and :after pseudo-elements within the Flexbox container. By assigning their content to an empty string and chiseling with border-bottom, balanced horizontal lines emerge like applause on either side of the text.

/* Flexbox - Making magic happen since 2009 */
.centered-text::before,
.centered-text::after {
  content: '';
  flex-grow: 1;
  background: #000;
  height: 1px;
  position: relative;
  top: .5em;
}

.centered-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

Use this method to create symmetric designs with minimal markup.

Manuscripts of mastery

The div/hr protocol

A trusty yet flexible technique entails using a div and hr combo. By governing the width and alignment of the div, you can wield your span-wrapped text just where you want it to be. Here's a sneak peek:

<!-- Give this code a trophy! -->
<div style="text-align: center;">
  <span style="background-color: #FFF; padding: 0 5px;">Text Here</span>
  <hr style="border: none; border-top: 2px solid #000; margin-top: -10px;"/>
</div>

Harnessing viewport widths

When sizing for responsiveness, vw (viewport width) and percentages (%) are your best buddies. They calibrate the length of your horizontal rules to the viewport size, ensuring your design dances across different screen sizes.

.hr-text {
  width: 50vw; /* Adjusts to half the viewport width, like a courteous dinner guest */
}

Absolute precision with positioning

At times, you may require specific control over the positioning of your text. Position: absolute; in conjunction with left, right, top, and bottom brings you to the controls. Do remember to set the parent container to position: relative; to establish the scene.

The art of floating text

Lastly, the art of floating brings the confluence of hr-wrapped text, creating slivers of line segments to cradle your text. Do remember to clear the floats -- trust me, they don't clear themselves.

/* These floats won't leave you high and dry! */
.hr-left {
  float: left;
  width: calc(50% - 50px); /* Adjust the 50px to account for the text width */
}

.hr-right {
  float: right;
  width: calc(50% - 50px);
}