使用css在html列表中居中图像

Question

我有以下内容：

JSFiddle

我希望图像在列表中的每个项目上垂直居中。我怎么能这样做？

<li>
   <img src="Scotland.jpg" />
   <h3>Scotland 4</h3>
   <p>P1</p>
   <p>P2</p>
   <p>P3</p>
   <p>P4</p>
   <p>P5</p>
   <p>P6</p>
   <p>P7</p>
   <p>P8</p> 
</li>

Answer 1

jsFiddle Demo

添加这些CSS块：

li {
    position: relative;
}
li img {
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

P.S - 请注意，这些CSS选择器过于笼统，因此请使用容器类或ID使其更具体。

Answer 2

这是JSFiddle

img {
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
}