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 example

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

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

中心图像水平在li里面，图像比li宽

3 个答案: