javascript - HTML:我如何在 <li> 标签内居中对齐图像

Question

我想将标签内的图像居中，我该怎么做？图像放置在屏幕的最左侧，但我希望它位于屏幕的中央而不会粘在左侧。这是我的 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>

Answer 1

你可以只使用text-align: center那个<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>