html - 图像在 li 内水平居中，其中图像比 li 宽

Question

在 li 标签中，我必须使用哪些选项(如果有)使图像居中？我所拥有的是一张特大号的图像，故意放在较小的 li 中。我想要实现的是在 li 标签内居中的图像......即裁剪溢出将在左侧和右侧共享，而不仅仅是右侧。下面的代码是我正在使用的代码的简化版本。

HTML

<ul>
  <li>
    <img src = "http://placehold.it/400x100">
  </li>
</ul>

CSS

li{
  overflow:hidden;
  width: 250px;
}
img {
  border: 3px solid pink;
}

代码笔在这里http://codepen.io/anon/pen/ebCEi .注意:我将无法使用背景图片。

Answer 1

li {
    overflow:hidden;
    width: 250px;
    position:relative;
    height:106px;
}
img {
    border: 3px solid pink;
    position:absolute;
    left:-75px;
}

jsFiddle example

您会注意到图像的左右边框不可见，因为它超出了列表项的视口(viewport)。