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