Question

我有这个网站，我似乎无法垂直对齐列表中的图像。 http://www.ruweplus.ro/echipamente-hidromasaj

我试过了，但它并没有垂直对齐我的形象：

＆＃13;

.image_wrapper img {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

＆＃13;

另外，我在父母身上使用了相同的代码。

Answer 1

我建议你用div包装你的图像并给它一个类名，在这里我给“测试”。

.test::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%
}
.test img{
    display: inline-block;
    vertical-align: middle;
}

同样，你的每一个元素“image_wrapper”，包括“test”类，必须有100％的高度。

Answer 2

＆＃34; old＆＃34;中的垂直对齐CSS＆lt; = 2真的很难。我建议你改用CSS3 flexboxes。请注意，这只适用于新浏览器。

它的要点非常简单：

.image_wrapper {
    display: flex;
    align-items: center;
}

JSFiddle

顺便说一下，this是一个很好的资源，可以帮助您开始使用Flexbox，

Answer 3

添加此Css

.image_wrapper {
  display: flex;
  align-items: center;
}

并删除此Css

.image_frame .image_wrapper .mask, .edd_download_image:after {
  /* -webkit-box-shadow: inset 0 0 5px 2px rgba(0,0,0,.07); */
  /* box-shadow: inset 0 0 5px 2px rgba(0,0,0,.07); */
}

我认为它会正常工作

Answer 4

如果您还需要旧版浏览器的解决方案，最好使用display:table-cell方法。你可能需要一个包含display:table的包装元素。

该方法在那里详细描述：https://css-tricks.com/centering-in-the-unknown/（章节：“更难：未知的孩子”）

或简称： http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html

如何垂直对齐此图像？

4 个答案: