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

codepen 在这里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 示例

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

Answer 2

使用text-align：

li {
   overflow:hidden;
   text-align: center; /* <-------  */
   width: 250px;
}

如果这不起作用试试这个：

img {
    border: 3px solid pink;
    margin: 0 auto; /* <-------  */
}

Answer 3

试试这个：

HTML

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

CSS

li{
  overflow:hidden;
  text-align:center;
  width: 250px;
}
img {
  border: 3px solid pink;
  margin:0 auto;
}