CODEWITHSUNDEEP
htmlcss
Alaa M.
Alaa M.

Reputation: 5273

How to center image in <li> elements?

I have a ul whose cells consist of an image and a text:

<ul class="special_ul">
  <li>
    <img src="img/solution_icon_optimize-efficnt.png">
    <a href = "">OTT</a>
  </li>
  <li>
    <img src="img/solution_icon_personal.png">
    <a href = "">Cloud Computing</a>
  </li>
  <li>
    <img src="img/solution_icon_diti-cx.png">
    <a href = "">Managed Services</a>
  </li>
  <li>
    <img src="img/solution_icon_biz-analitics.png">
    <a href = "">Social Media</a>
  </li>
</ul>

css:

.special_ul li{
    padding-right: 10px;
    list-style-type: none;
    display: inline-block;
    text-align: center;
}

.special_ul li img , .special_ul li a{
    display:block;
}

The problem is that the text is centered but the images are not:

ul

(i highlighted the list with the mouse so you can see the images are not in the center)

How do I make the images centered (horizontally) as well?

Upvotes: 1

Views: 17465

Answers (1)

Stickers
Stickers

Reputation: 78686

You can just remove img {display: block;}, by default it is inline level, they will get centered with text-align: center; set on the container, which you already did.

Or, add margin: 0 auto; if you need to keep display: block; on the img:

.special_ul li img {
  display: block;
  margin: 0 auto;
}

Upvotes: 5

Related Questions