1

我有以下内容：

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>
4

2 回答 2

2

jsFiddle 演示

添加这些 CSS 块：

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

PS - 请注意，这些 CSS 选择器过于笼统，因此请使用容器类或 ID 使它们更具体。

于 2013-08-31T07:52:15.820 回答
1

这是JSFiddle

img {
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
}
于 2013-08-31T07:48:22.397 回答