2015-10-05 110 views
-1

我有这个网站,我似乎无法垂直对齐列表上的图像。 http://www.ruweplus.ro/echipamente-hidromasaj如何垂直对齐此图像?

我试过,但它并没有垂直对齐我的形象:

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

另外,我用父相同的代码。

+0

嗨,发生了什么?我的解决方案不再工作了?我看到你也删除了你的评论。 –

+0

是的,我删除了评论,因为它不再正确。你的答案不是解决方案。我认为它有效,但我有一个标签没有封好,为什么它看起来第一次工作,但它没有。我自己解决了它。我尝试了别的东西。 – Ionut

+0

大声笑很高兴你明白了。但让我告诉你我的解决方案工作得很好。下次在这里问问题之前仔细检查你的代码!我们不想浪费时间为您的小错误寻找解决方案。 –

回答

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%的高度。

0

“旧”CSS < = 2中的垂直对齐非常困难。我建议你改用CSS3 flexboxes。请注意,这只适用于新的浏览器。

它的要点是非常简单的:

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

JSFiddle

顺便说一句,this是一个很好的资源,让你开始与flexboxes,

0

添加这个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); */ 
} 

它会正常工作,我认为

+0

另外,不是一个好的解决方案。 – Ionut