Html 若标签位于未排序列表中，则将图像居中显示在页面上

我正在尝试找出如何将图像居中放置在页面上，而不是列表项上

例如：

<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，而不是列表项。这可能吗？我需要它在IE9中工作，最好是在IE8中工作

此外，我的一些列表可能会缩进几级，因此可能

左边距：40px

或

左边距：80px

，因此我需要对此进行说明

---

下面是一个典型用例的例子：

您可以使用绝对定位来实现这一点，它将以父代相对对象为中心，这可能就是页面。我在这里拉了把小提琴：

}

为了使这一点起作用： 1.页面必须是相对位置最近的父级 2.图像的宽度必须是已知的

---

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

这就是您要寻找的

<div class="page">
    <ul>
        <li>
            <p>Some text....</p>
            <img align="center" width="600" height="300" src="/some/image.png" hspace="25" vspace="25"/>
        </li>
    </ul>

</div>

一些文字



与页面的宽度是否相同
？您能告诉我们最终结果应该是什么样的吗？有人可能会提供比你拥有的更好的选择这里没有足够的信息来帮助你。请展示一个更完整的示例，最好是代码片段或fiddle。垂直和水平居中？我添加了一个典型用例的fiddle，只需要图像与页面居中，而不是列表项居中。列表项上没有任何其他样式，只有浏览器默认设置。我试着水平居中，而不是垂直居中。图像需要保持在它的位置上，而不是覆盖任何文本。如果文本有几行长或者其他什么的话，它就会被图像所覆盖。（它只需要display:block属性就可以解决这个问题）用JS很容易解决，我更新了你的fiddle:Don't think你不能用CSS单独解决这个问题。
<div class="page">
    <ul>
        <li>
            <p>Some text....</p>
            <img align="center" width="600" height="300" src="/some/image.png" hspace="25" vspace="25"/>
        </li>
    </ul>

</div>