Question

vertical-align过去总是给我带来问题，我再一次遇到了一个我不知道如何解决的问题。

我有这个HTML：

<ul id="council-slider">
  <li class="col-md-12" style="display: block">
    <img src="somesource" />
    <div class="council-spacer"></div>
    <p>text content goes here</p>
  </li>
</ul>

CSS：

#council-slider {
    margin: 0 auto;
    list-style: none;
    min-height: 300px;
    max-height: 400px;
}

#council-slider li img {
    float: left;
    height: auto;
    width: 25%;
    margin: 5px;
}

.council-spacer {
    height: 300px;
    width: 100px;
    float: left;
}

#council-slider li p {
    margin-top: 100px;
}

我希望能够在中间垂直对齐图像。文本是多行包装，因此使用line-height在这种情况下不起作用。图像也可以有不同的高度。

有多个列表项;我只是在示例中使用了一个来简化和减少html。

Answer 1

您应该了解vertical-align属性可以应用的位置。

从MDN引用：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

vertical-align CSS属性指定内嵌或 table-cell 框的垂直对齐方式。

由于您的元素未显示为inline或table-cell vertical-align: middle;，因此对您没有任何帮助。

但是，您可以将<div>样式设置为display: table-cell;然后vertical-align: middle

或者，这可以通过CSS3实现，正如hars指出的那样，只需确保您的用户的浏览器支持CSS3

.valign-middle {
   position: relative;
   top: 50%;
   Transform: translateY (-50%);
}

这种方式有效 -

设置相对于父/容器的位置（例如您的<li>）
移动要垂直对齐的图像，向下移动容器高度的50％
将图像向上移动图像高度的50％

Answer 2

使用flexbox会更容易：display: flex;和align-items: center;

Demo

#council-slider {
list-style: none;
}

#council-slider li{
    display: flex;
    margin: 10px 0;
    align-items: center;
}
.council-spacer {
    width: 20px;
}

如何垂直对齐列表中的图像

2 个答案: