Shahid Sarwar Shahid Sarwar - 4 months ago 10
PHP Question

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

Answer
.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.

Comments