Html 图像在li内水平居中，图像比li宽

在

li

标签内，我必须使用哪些选项（如果有）将图像居中？我所拥有的是一个超大的图像，故意放在一个较小的图像里。我试图实现的是以li tag为中心的图像。。。ie，这样裁剪的溢出将在左侧和右侧共享，而不仅仅是右侧。下面的代码是我正在使用的代码的简化版本

HTML

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

---

密码笔在这里。注意：我将无法使用背景图像。

使用

文本对齐

：

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

li{
溢出：隐藏；
文本对齐：居中；/*尝试以下操作：

HTML


您会注意到图像上的左右边框不可见，因为它超出了列表项的视口。
您想要的结果是什么？要使图像居中于li标记内…即使裁剪的溢出在左右两侧共享，而不仅仅是右侧-将更新我的问题嗯，这是因为您r图像比列表项宽。因此您希望
li
居中--而不是图像。祝您好运。如果可能，图像居中于li内。如果不可能，请从规格中查看原因，thanks@BhushanFirake是的，我知道，但这是故意的，对不起，我认为这是显而易见的，因为它在代码
溢出：隐藏中n、 宽度：250px；
li {
   overflow:hidden;
   text-align: center; /* <-------  */
   width: 250px;
}

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

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

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

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