我有这个网站,我似乎无法垂直对齐列表上的图像。 http://www.ruweplus.ro/echipamente-hidromasaj如何垂直对齐此图像?
我试过,但它并没有垂直对齐我的形象:
.image_wrapper img {
display: inline-block;
vertical-align: middle;
height: 100%;
}
另外,我用父相同的代码。
我有这个网站,我似乎无法垂直对齐列表上的图像。 http://www.ruweplus.ro/echipamente-hidromasaj如何垂直对齐此图像?
我试过,但它并没有垂直对齐我的形象:
.image_wrapper img {
display: inline-block;
vertical-align: middle;
height: 100%;
}
另外,我用父相同的代码。
我建议你用一个div包装你的形象,给它一个类名,在这里我给“测试”。
.test::before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%
}
.test img{
display: inline-block;
vertical-align: middle;
}
此外,您的下一课“image_wrapper”(包括“test”类)的每个元素都必须具有100%的高度。
添加这个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); */
}
它会正常工作,我认为
另外,不是一个好的解决方案。 – Ionut
,如果您还需要为旧版浏览器的解决方案,你最好使用display:table-cell
方法。 你可能需要一个包装元素display:table
。
的方法进行了详细那边descripted:https://css-tricks.com/centering-in-the-unknown/(章节:“哈德:未知子”)
或短那边: http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html
嗨,发生了什么?我的解决方案不再工作了?我看到你也删除了你的评论。 –
是的,我删除了评论,因为它不再正确。你的答案不是解决方案。我认为它有效,但我有一个标签没有封好,为什么它看起来第一次工作,但它没有。我自己解决了它。我尝试了别的东西。 – Ionut
大声笑很高兴你明白了。但让我告诉你我的解决方案工作得很好。下次在这里问问题之前仔细检查你的代码!我们不想浪费时间为您的小错误寻找解决方案。 –