Chrome Bullet Position on Center Align List

HTML & CSS
1

I have never noticed this before, but I’m trying to find a workaround. When a list (li) is centered, the bullets in Firefox position correctly, next to the text, while the bullets in Chrome still align to the left, leaving the text with separation.

Is there a workaround to this in CSS? Or is the best option to abandon the list format and add • before each list item?

all feedback appreciated.

Ryan

2

Hi, I never noticed it before either. Probably because I always set them to list-style:none when they were centered.

Yes, just use list-style-position: inside; and it will give you the same results in Chrome and FF

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
ul {
  text-align:center;
  list-style-position:inside;
  border:1px solid red;
  padding:0;
}

</style>

</head>
<body>

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

</body>
</html>
1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.