css - 我如何将这个简单的幻灯片居中？

Question

我一直试图让这个幻灯片居中但没有成功：

http://www.lateralcode.com/simple-slideshow/

看来position: absolute这才是真正困扰我的...

如何使此幻灯片居中，以便在调整页面大小时看起来正确，并且幻灯片仍然可以正常工作？

请帮忙！

Answer 1

您可以将具有 css 属性的元素居中，position:absolute如下所示：

.elem { 
    position: absolute; width:200px; height:200px; left:50%;
    margin-left:-100px; /* you need to deduct half width from margin left */
}

这是jsFiddle。

Answer 2

用 div 包裹那个 ul 。

<div id="slider">
  <ul></ul>
</div>

#slider{
width:650px;
margin-left:auto;
margin-right:auto"
}

Answer 3

我使用它来工作：

.ppt img { margin-left:-50%; }
.ppt li { left:50%; }