CODEWITHSUNDEEP
htmlcss
Alfi Septandhi
Alfi Septandhi

Reputation: 1

Centering some <li> inside <ul>

I'm have a problem when I'm trying to centered some li inside of ul
So this is my code:

<div>
    <ul>
        <li><a href="#"><img src="images/categories-6.png" alt="Books"/></a></li>
        <li><a href="#"><img src="images/categories-7.png" alt="Learn"/></a></li>
        <li><a href="#"><img src="images/categories-8.png" alt="Ball"/></a></li>			
    </ul>
</div>

And the result is

enter image description here

So, how can I make that 3 pic's position become in the center?

Upvotes: 0

Views: 426

Answers (8)

Alexander Kim
Alexander Kim

Reputation: 18401

Very easy, using flexbox:

ul {
  display: flex;
  justify-content: center;
}

According to caniuse - it's safe to use flexbox. Also don't forget about flexbox prefixes.

Upvotes: 0

Jishnu V S
Jishnu V S

Reputation: 8409

Try something like this

ul {
   text-align:center;
   padding:0;
}
ul li {
   display:inline-block;
   list-style:none;
   width:100px;
}
ul li img {
   width:100%;
}
<div>
  <ul>
    <li> <a href="#"><img src="https://pbs.twimg.com/profile_images/655066410087940096/QSUlrrlm.png" alt="Books"/></a> </li>
    <li> <a href="#"><img src="https://pbs.twimg.com/profile_images/655066410087940096/QSUlrrlm.png" alt="Learn"/></a> </li>
    <li> <a href="#"><img src="https://pbs.twimg.com/profile_images/655066410087940096/QSUlrrlm.png" alt="Ball"/></a> </li>
  </ul>
</div>

Upvotes: 2

Obink
Obink

Reputation: 329

stop complicated things, you don't need extra div to do this

set ul padding 0 to get rid of the basic element from UL, and start using flex in the ul tags.

justify-content means aligning your flex items(child/li) horizontally, the other side is align-items means aligning your flex items(child/li) vertically. Maybe this code will help you.

ul{
background:#ccc;
padding:0;
width:100%;
height:100%;

  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
}

li{
  list-style-type:none;
  margin:5px;
}

li img{
  width:60px;
  height:60px;
}
<ul>
  <li>
   <a href="#"><img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" alt="Books" /></a>
  </li>

  <li>
   <a href="#"><img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" alt="Learn" /></a>
  </li>

  <li>
   <a href="#"><img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" alt="Ball" /></a>
  </li>         
</ul>

Upvotes: 0

Phil
Phil

Reputation: 164902

You can use the flex CSS layout to achieve this quite simply

ul {
  list-style: none;
  display: flex;
  justify-content: space-around;

  /* The below is just to pretty-up the snippet example */
  width: 50%;
  padding: 10px;
  margin: auto;
  background-color: #eee;
}
<ul>
  <li><a href="#"><img src="http://lorempicsum.com/futurama/50/50/1" alt="Books" /></a></li>
  <li><a href="#"><img src="http://lorempicsum.com/futurama/50/50/2" alt="Learn" /></a></li>
  <li><a href="#"><img src="http://lorempicsum.com/futurama/50/50/3" alt="Ball" /></a></li>
</ul>

Upvotes: 1

Shivkumar kondi
Shivkumar kondi

Reputation: 6782

Text-align is enough here. but if you need more adjustments use bootstrap grids or else align with margins if needed.

   h4 {text-align:center;}
    ul {
       text-align:center;
       margin-left:-8%;
    }
    ul li {
       display:inline-block;
       list-style:none;
    }
    img{
      height:100px;
      width:100px;
      padding:1em;
      }
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Case</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <style>
 
    </style>
    <body>

         
     
    <div class="container">
      <div class="well">
      <h4>Categories</h3>
      <ul>

      <li>
       <a href="#"><img src="http://lorempixel.com/400/200/sports/1/"></a>
      </li>

      <li>
       <a href="#"><img src="http://lorempixel.com/400/200/sports/2/"></a>
      </li>

      <li>
       <a href="#"><img src="http://lorempixel.com/400/200/sports/3/"></a>
      </li>         

    </ul>
    </div>
    </div>

    </body>
    </html>

Upvotes: 0

Hezron
Hezron

Reputation: 352

Try this.

ul{
  list-style-type: none;
  padding: 0;
  text-align: center;
}
li{
  display: inline-block;
  margin: 0 50px;
}

Upvotes: 0

Bhavin Shah
Bhavin Shah

Reputation: 2482

div{
  text-align:center;
  display:flex;
  margin: 0 auto;
}

div ul{
   margin: auto;
}

div  li{
 
  list-style-type:none;
  display:inline;
}

li img{
  width:60px;
  height:60px;
}
<div><ul>

  <li>
   <a href="#"><img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" alt="Books" /></a>
  </li>

  <li>
   <a href="#"><img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" alt="Learn" /></a>
  </li>

  <li>
   <a href="#"><img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" alt="Ball" /></a>
  </li>         

</ul></div>

Here is JSFiddle

Hope this helps.

Upvotes: 2

Manish
Manish

Reputation: 5066

Here what you need. Use text-align:center

ul{
  text-align:center;
}
li{
  list-style:none;
  display:inline;
}

img{
  height:50px;
  width:50px;
  }
<div><ul>

  <li>
   <a href="#"><img src="http://www.pd4pic.com/images/list-checkbox-checked-tick-note-office-choice.png" alt="Books"/></a>
  </li>

  <li>
   <a href="#"><img src="http://www.pd4pic.com/images/list-checkbox-checked-tick-note-office-choice.png" alt="Learn"/></a>
  </li>

  <li>
   <a href="#"><img src="http://www.pd4pic.com/images/list-checkbox-checked-tick-note-office-choice.png" alt="Ball"/></a>
  </li>         

</ul></div>

Upvotes: 1

Related Questions