ul项目符号与文本无法对齐求助：已试text-align:center仍无效

Alright, let's break down why your list isn't aligning correctly and fix it. The core issue here is that setting text-align:center directly on the <ul> forces all content inside (including list items and their bullets) to center, which breaks the natural bullet-text alignment. Even wrapping it in a <div> won't help unless you adjust the right styles to separate "centering the entire list block" from "keeping bullet-text alignment intact".

Here are a few reliable solutions:

Solution 1: Flexbox (Clean & Modern) #

This method centers the entire list in its container while keeping each list item's content (bullet + text) properly aligned:

.center-aligned-list {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers the list horizontally in the parent */
  list-style-position: inside; /* Ensures bullets don't overflow outside the list */
  padding-left: 0; /* Removes default ul padding */
}

.center-aligned-list li {
  text-align: left; /* Keeps text aligned with the bullet */
  width: fit-content; /* Makes li width match its content, not the full container */
}

Use it with your HTML like this:

<ul class="center-aligned-list">
  <li>1794 - born in Berkeley, UK</li>
  <li>1821 - began his training as a doctor</li>
</ul>

Solution 2: Traditional Block-Level Centering (Browser-Compatible) #

If you need support for older browsers, this approach centers the <ul> itself as a block element, then keeps list items left-aligned:

.center-aligned-list {
  margin: 0 auto; /* Centers the ul block in its parent */
  width: fit-content; /* Makes ul width match its content (required for margin:auto to work) */
  padding-left: 1.5em; /* Keeps default bullet spacing */
}

.center-aligned-list li {
  text-align: left; /* Ensures text stays aligned with bullets */
}

Solution 3: Custom Bullet Positioning (For Edge Cases) #

If you must keep text-align:center on the parent container, you can manually control the bullet position to fix alignment:

.center-aligned-list {
  text-align: center;
  list-style: none; /* Hide default bullets */
  padding-left: 0;
}

.center-aligned-list li {
  position: relative;
  padding-left: 1.5em; /* Space for custom bullet */
  display: inline-block; /* Keeps li content centered while allowing bullet positioning */
  text-align: left;
}

.center-aligned-list li::before {
  content: "•"; /* Custom bullet character */
  position: absolute;
  left: 0;
}

Why Your Previous Attempts Failed #

• Setting text-align:center on the <ul> makes every list item's content center, which pulls text away from the default bullet position.
• Wrapping in a <div> with text-align:center does the same thing—you still need to adjust the <ul> and <li> styles to preserve bullet-text alignment while centering the whole list.

内容的提问来源于stack exchange，提问作者Paulo Affonso Júnior