<h3 id="heading-1-list-style-position-inside">1. list-style-position: inside;</h3>
<p>For centering the bullet points together with the list items of an unordered list in HTML &lt;ul&gt;</p>
<pre><code class="lang-css"><span class="hljs-selector-tag">ul</span> {
    <span class="hljs-attribute">text-align</span>: center;
    <span class="hljs-attribute">list-style-position</span>: inside;
}
</code></pre>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/monacodelisa/pen/wvxmWjP">https://codepen.io/monacodelisa/pen/wvxmWjP</a></div>


### 1\. list-style-position: inside;

For centering the bullet points together with the list items of an unordered list in HTML &lt;ul&gt;

```css
ul {
    text-align: center;
    list-style-position: inside;
}
```

%[https://codepen.io/monacodelisa/pen/wvxmWjP]

{{ MonaCodeLisa }}

{{ MonaCodeLisa }}

Some of my Favorite CSS Styling Rules

1. list-style-position: inside;