How Can I Center Text Between Horizontal Rules?

Centering Text Within Horizontal Rules

To create horizontal lines that flank centered text, various solutions have been proposed, each with its own limitations.

One common approach involves using multiple <div> elements and floating them:

<div>

However, this approach can produce alignment issues. Similarly, using a table can result in misalignment:

<table><tr>
  <td>

A cleaner solution emerged with the introduction of Flexbox:

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

<div class="separator">Next section</div>

This approach provides precise alignment and eliminates the need for complex markup or "fudgy" solutions.

The above is the detailed content of How Can I Center Text Between Horizontal Rules?. For more information, please follow other related articles on the PHP Chinese website!