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>
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>
Provide the full code to simplify the design
.sequence-slider{
text-align:center;
}
check the below link
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>
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>
li {
float:left;
width: 100%;
text-align: center;
}
.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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.