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

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

没有看到您实际的 css 代码很难说，但您应该对所有要对齐的对象使用 vertical-align: middle，并且您可能需要将段落的显示更改为display: table-cell.

Answer 2

您应该仔细阅读 vertical-align 属性可以应用的地方。

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

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

因为您的元素未显示为 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%);
}

工作方式 -

设置相对于 parent/container 的位置（即您的 <li>）
将要垂直对齐的图像向下移动容器高度的 50%
将图片向上移动图片高度的 50%

Answer 3

添加 class 到您的 img，如下所示。

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

参考This

Answer 4

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

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

How to vertically align images inside a list

html

css

vertical-alignment