How do I get the bullets of an unordered list to center with the text?

html

responsive-design

css

list-style

byAlex Kataev·Dec 21, 2024

Quickly center bullets with text in an unordered list using the following CSS:

ul {
  text-align: center;  /* Gather up everyone! */
}
li {
  display: inline-block;  /* Acing the single row challenge */
  width: 100%;  /* Sharing is caring */
}

Incorporate the aforementioned CSS using this HTML structure:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

This simple strategy aligns your list items and their bullets horizontally!

Bullet point alignment: Stand in line

To align bullets of a list with the centered text, list-style-position: inside; is your friend. It steps in when bullets hang outside, creating a neat queue:

ul {
  list-style-position: inside;  /* No one puts bullet in the corner! */
}

For a pleasant surprise, remember to wipe the default padding off to the left:

ul {
  padding-left: 0;  /* Left behind? Nah! */
}

And do meet the stylish cousin of the <ul>, max-width and margin: auto;. They center your <ul> horizontally:

ul {
  max-width: 500px; /* Play around to find your match */
  margin: auto; /* Balance is not a myth */
}

Bullet point gymnastics: The vertical alignment

When you need the bullets to jump up a little, you dial in the transform property. Yes, it deals with vertical transformations:

li::before {
  content: "•";
  transform: translate(0%, -50%);  /* Bullet's on a roller coaster */
}

But before that, get bullets bold-er to make them visible from Mars:

li::before {
  font-weight: bold;  /* Going strong! */
}

Custom alerts: Pimp up your bullet styles

Bored of the bland, everyman's default bullets? Add color, change fonts, effectively wear your style on a bullet point:

li::before {
  content: "•";
  color: #5a5a5a; /* 50 shades of Gray? */
  font-family: 'Arial', sans-serif; /* Everyone loves 'Arial' */
}

Just a quick <li> makeover turns the visibility from zero to hero.

Embrace responsiveness: Adapt and respond

In a responsive design era, your bullets need to comply with device and screen variances. The styles mentioned above do their job well across devices, but you must check designs on a myriad of screens to ensure their perfection.

While setting max-width for the <ul>, look at relative units like percentages or viewport units to maintain flexibility:

ul {
  max-width: 80vw;  /* Fluid like water */
}

With these tweaks, your lists will look fab on mobile and larger screens - always shining at the center, making content digestible.

Troubleshooting: Dodge the pitfalls

Styling lists can throw some curveballs. Here's how you field them:

Uniformity across browsers: Reset default browser styles for lists before beginning your styling journey.
List items looking like rebels: Ensure your li elements are either block-level or inline-block, respecting the boundaries.
Misalignment due to padding or margin: An explicit zero padding and margin on ul or li elements will maintain harmony in list alignment.