CODEWITHSUNDEEP
javascriptphphtmlcssweb
Shahid Sarwar
Shahid Sarwar

Reputation: 1209

HTML: How do i center align an image inside an <li> tag

I want to center an image inside a tag how do i do it? the image is placed on the extreme left on the screen but i want it to be in the center of the screen without sticking to the left. here is my html:

<div class="sequence-slider">
  <div id="sequence"><i class="sequence-prev icon-angle-left"></i> <i class="sequence-next icon-angle-right"></i>
    <ul class="sequence-canvas">

      <!-- Sequencejs Slider Single Item -->
      <li>

        <img class="main-image" src="photo/fac2.jpg" alt="Image" /> 

      </li>

      <!-- Sequencejs Slider Single Item -->
      <li>

        <img class="main-image" src="photo/fac1.jpg" alt="Image" /> 

      </li>

      <!THIS IMAGE STICK TO THE LEFT BUT I WANT IT IN THE CENTER>
      <li>
        <img class="main-image" src="photo/slide3.png" alt="Image" style ="width: auto;
  height : auto; " /> 

      </li>

    </ul>

enter image description here

Upvotes: 0

Views: 2163

Answers (6)

pradeep1991singh
pradeep1991singh

Reputation: 8375

You can just use text-align: center to that<li>

#sequence ul li {
  list-style: none;
  text-align: center;
}
<div class="sequence-slider">
  <div id="sequence"><i class="sequence-prev icon-angle-left"></i> <i class="sequence-next icon-angle-right"></i>
    <ul class="sequence-canvas">


      <!THIS IMAGE STICK TO THE LEFT BUT I WANT IT IN THE CENTER>
      <li>
        <img class="main-image" src="http://lorempixel.com/400/200/sports/" alt="Image" style ="width: auto;
                                                                                                height : auto; " /> 

      </li>

    </ul>

  </div>
</div>

Upvotes: 1

equi
equi

Reputation: 28

.sequence-canvas, .sequence-canvas li {width: 100%;}
.sequence-canvas img {margin:0 auto;}

First line make sure the space takes full width. Second line centers image in that space.

Upvotes: 0

Jose Serodio
Jose Serodio

Reputation: 1439

You can just, just add text-align: center to your style attribute.

<li style="text-align: center">
    <img class="main-image" src="photo/slide3.png" alt="Image" style ="width:auto; height:auto;" /> 
</li>

Upvotes: 0

Pratik Deshmukh
Pratik Deshmukh

Reputation: 308

li { 
 float:left;
 width: 100%;
 text-align: center;
}

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

There are two simple means of achieving this, the first is the use of text-align: center on the parent element:

li {
  list-style-type: none;
  background-color: #ffa;
  text-align: center;
}
<ul>
  <li>
    <img src="http://lorempixel.com/200/200" />
  </li>
</ul>

While the above explicitly center-aligns the text, this works because the <img> element is an inline-block element, which will cause it to be centered exactly as any text, or inline, elements would be.

You could, instead, use a block-level display type along with the use of margin-left: auto and margin-right: auto; for the <img>:

li {
  list-style-type: none;
  background-color: #ffa;
}
li img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<ul>
  <li>
    <img src="http://lorempixel.com/200/200" />
  </li>
</ul>

Upvotes: 0

Nik Varma
Nik Varma

Reputation: 168

Provide the full code to simplify the design

.sequence-slider{
  text-align:center;
}

check the below link

https://jsfiddle.net/a3pp2sea/

Upvotes: 0

Related Questions