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>

＆＃13;

#sequence ul li {
  list-style: none;
  text-align: center;
}

＆＃13;

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

＆＃13;

Answer 2

提供简化设计的完整代码

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

检查以下链接

https://jsfiddle.net/a3pp2sea/

Answer 3

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

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

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

Answer 5

=1*IF(ISNUMBER(-A1),A1,MID(A1,3,2) & CHOOSE(RIGHT(A1,1),"08",20,33,46))

Answer 6

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

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

HTML：如何将图像居中对齐<li>标记内

6 个答案: