CODEWITHSUNDEEP
javascripthtmlcss
Vikram Srinivasan
Vikram Srinivasan

Reputation: 187

Centering an img inside li

I have many lis under ul . I have written here my first image which I pass source in javascript dynamically. My image is left aligned, I need it to be centered.

$("#imgemp").attr("src", src);
<ul>
  <li class="imgli">
    <img id="imgemp" border="0" width="90" height="90">
  </li>
</ul>

Upvotes: 2

Views: 100

Answers (4)

Igor Ivancha
Igor Ivancha

Reputation: 3451

You can also use:

img {
  display: block;
  margin: 0 auto;
}

Upvotes: 2

gurvinder372
gurvinder372

Reputation: 68393

Assuming your li's width is big enough (more than 90) than text-align:center should do it.

<li class="imgli" style='width:200px;text-align:center;' > 
  <img id="imgemp" border="0" width="90" height="90"> 
</li>

Upvotes: 1

HeiN
HeiN

Reputation: 503

You have already appended imgli class to li. Why not just use this?

.imgli{
    text-align: center;
}

Upvotes: 1

maioman
maioman

Reputation: 18754

image is an inline element so you can use text-align:center.

$("#imgemp").attr("src", src);
li {
  text-align: center
}
<ul>
  <li class="imgli">
    <img id="imgemp" border="0" width="90" height="90">
  </li>
</ul>

Upvotes: 1

Related Questions