rory-h rory-h - 21 days ago 5
CSS Question

ul li to align and justify on left side of div

I'm trying to align a list of option to the left of my div box.

at the moment this what I have:
enter image description here

html code:

<div id="categorylist">
<ul>
<li class="text-white">ALL <img src="images/all-
ico.png"></li>
<li class="text-white">COMUNNITY DEVELOPMENT <img
src="images/commdev-ico.png"></li>
<li class="text-white">SPORTS <img src="images/sports-ico.png"></li>
<li class="text-white">EDUCATION <img src="images/edu-ico.png"></li>
</ul>

</div>


css code:

#categorylist{
margin-left: auto;
margin-right: auto;
display: table;
}
#categorylist ul {
text-align: left;
}


What I want to achieve is this:
enter image description here

Any help and suggestions would be much appreciated

Answer

You can make categorylist ul, text-align:right; instead of left

 #categorylist{
      margin-left: auto;
      margin-right: auto;
      display: table;
  }
  #categorylist ul {
      text-align: right;
  }
  <div id="categorylist">
                <ul>
                    <li class="text-white">ALL <img src="images/all-   
                    ico.png"></li>
                    <li class="text-white">COMUNNITY DEVELOPMENT <img 
                    src="images/commdev-ico.png"></li>
                    <li class="text-white">SPORTS <img src="images/sports-ico.png"></li>
                    <li class="text-white">EDUCATION <img src="images/edu-ico.png"></li>
                </ul>

        </div>