HTML：如何在 <li> 标签内居中对齐图像答案

【问题标题】：HTML: How do i center align an image inside an <li> tagHTML：如何在 <li> 标签内居中对齐图像
【发布时间】：2016-11-06 04:52:54
【问题描述】：

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

【问题讨论】：

请提供相应的CSS以便更好地了解问题。
center my image inside ul li div的可能重复
li { text-align: center; }
如果您修改代码，我可以帮助您更好
文本对齐：当然中心。

标签： javascript php html css web

【解决方案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>

【讨论】：

我必须同时使用你的答案和@equi 的答案才能让它发挥作用

【解决方案2】：

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

第一行确保空间占据全宽。第二行在该空间中居中图像。

【讨论】：

【解决方案3】：

提供完整代码以简化设计

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

查看以下链接

https://jsfiddle.net/a3pp2sea/

【讨论】：

【解决方案4】：

有两种简单的方法可以实现，第一种是在父元素上使用text-align: center：

li {
  list-style-type: none;
  background-color: #ffa;
  text-align: center;
}

<ul>
  <li>
    <img src="http://lorempixel.com/200/200" />
  </li>
</ul>

虽然上面明确地使文本居中对齐，但这是有效的，因为<img> 元素是inline-block 元素，这将导致它与任何文本或inline 元素一样居中。

您可以改为使用块级 display 类型以及 margin-left: auto 和 margin-right: auto; 用于 <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>

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

您可以，只需将text-align: center 添加到您的样式属性即可。

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

【讨论】：

那行不通。 text-align 需要在祖先上设置。不是图片。
编辑了我的答案，我想现在可以了。