CODEWITHSUNDEEP
htmlcss
Viteazul
Viteazul

Reputation: 181

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 two 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.

.list li {
    float: left;
    list-style-position: inside;
    list-style-type: disc;
    margin-right: 1em;
}
<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>

Upvotes: 1

Views: 81

Answers (5)

Mo&#39;men Mohamed
Mo&#39;men Mohamed

Reputation: 1909

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>

Upvotes: 2

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

Use ::before

ul {
  text-align: center;
}

.list li
{
  display: inline;
}

.list li::before {
  content: '•';
  margin: 0px 0.3rem;
}
<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>

Upvotes: 1

FCodex
FCodex

Reputation: 44

Try this

.list {
     position: relative;
     float: left;
     left: 50%;
     margin: 0 auto;
     padding: 0;
}



li {
    position: relative;
     float: left;
     right: 50%;
     margin-right: 10px;
     padding: 5px 10px;
     background: #fff;
     list-style: disc;
 }

Upvotes: 1

Dekel
Dekel

Reputation: 62536

You can set the width of the ul container (otherwise it has no width because all of it's child elements are floated elements).

Once the container has width you can use margin: 0 auto; to center it:

.list {
  margin: 0 auto;
  width: 330px;
}
.list li
{
    float: left;
    list-style-position: inside;
    list-style-type: disc;
    margin-right: 1em;
}
<ul class="list">
    <li><a href="X site" target="_blank" rel="noopener">Sitemap</a></li>
    <li>2018 | All rights reserved</li>
</ul>

Upvotes: 1

Yuri Pereira
Yuri Pereira

Reputation: 1995

To center elements with css, should be provided some width, in this case 100%.

ul {
  width: 100%;
  text-align: center;
}

If this won't work, probably there's another wrapper div avoiding this property, and you should post your whole code here.

Provide to us a MCVE example, welcome to stackOverflow!

Upvotes: 1

Related Questions