Viteazul Viteazul - 1 month ago 8
CSS Question

Center my ul elements on the page without losing the bullet points

I am trying the center my ul elements on one line, in the center of the page without losing the bullet points.

enter image description here

I want those 2 ul elements to be placed in the middle of the page. I tried various css methods but I am still not managing to make it work.

<ul class="list">
<li><a href="X site" target="_blank" rel="noopener">Sitemap</a></li>
<li>© <?php echo date('Y'); ?> | All rights reserved</li>
</ul>

.list li
{
float: left;
list-style-position: inside;
list-style-type: disc;
margin-right: 1em;
}

Answer Source

Fix it using the :before selector

.list{ text-align: center; }
.list li
    {
        display: inline;
        margin-right: 1em;
    }
    .list li:before {
        content: '\2022';
        margin-right: 0.5em;
        color: red;
    }
<ul class="list">
		<li><a href="X site" target="_blank" rel="noopener">Sitemap</a></li>
		<li>© <?php echo date('Y'); ?> | All rights reserved</li>
	</ul>