Question

我想弄清楚如何将图像居中到页面而不是列表项。

例如：

<div class="page">
  <!-- Margin could be anything -->
  <ul style="margin-left: 80px">
    <li>
      Some text. <!-- This could be really long -->
      <figure>
        <img class="image" src="http://placehold.it/350x150" />
        <figcaption>Image caption</figcaption> <!-- Needs to center to page not list item -->
      </figure>
    </li>
    <li>Other item</li>
  </ul>
</div>

在普通列表中，列表项将缩进一点，这就是我想要的。但是，我希望图像居中到页面div而不是列表项。这可能吗？我需要它在IE 9中工作，最好是IE 8。

此外，我的某些列表可能会缩进几个级别，因此可能会margin-left: 40px或margin-left: 80px，所以我需要考虑到这一点。

以下是典型用例的小提琴：https://jsfiddle.net/t4uoh7k7/

Answer 1

您可以使用绝对定位来执行此操作，并且它将居中于父级相对对象，该对象有望成为页面。我在这里做了一个小提琴：

https://jsfiddle.net/qgrb33sm/

.center-me-image{
position:absolute;
/*we have to spcify width to center*/
width:200px;
margin-left:-100px;
left:50%;

}

为此工作： 1.页面必须是最近的相对定位父级 2.必须知道图像的宽度。

第2项可以通过javascript轻松实现，第1项可以通过使用javascript确定父项的偏移量来解决。

如果标记位于无序列表中，则在页面上显示中心图像

1 个答案: