Question

我无法在我的图像中垂直对齐。好像display table and vertical align对我不起作用。那还有其他解决方案吗？

here它看起来像什么。这是样本fiddle

小提琴不是100％工作，但你可以看看结构是什么......

我能做的最基本的事情就是设置最大高度并自动调整宽度。这样每张图片都是一样的

Answer 1

没有评论，只是尝试。

QMAKE_MACOSX_DEPLOYMENT_TARGET = 10.11

ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 500px;
  list-style: none;
  padding-left: 0;
}

Answer 2

您可以使用css绝对布局：

制作ul li元素position:relative

将css属性添加到ul li img

position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;

根据需要为li和li img提供任意大小的媒体资源

＆＃13;

ul {
  list-style: none;
}
ul li {
  position: relative;
  height: 200px;
  background-color: #fafafa;
  float: left;
  width: 25%;
}
ul li img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background-color: #f0f0f0;
 
}
ul li:nth-child(1) img{
    width: 100px;
    height: 100px;
}
ul li:nth-child(2) img{
    width: 150px;
    height: 150px;
}
ul li:nth-child(3) img{
    width: 50px;
    height: 50px;
}
ul li:nth-child(4) img{
    width: 180px;
    height: 180px;
}

＆＃13;

<ul>
  <li>
    <img src="">
  </li>
  <li>
    <img src="">
  </li>
  <li>
    <img src="">
  </li>
  <li>
    <img src="">
  </li>
</ul>

＆＃13;

另见：

How To Center Anything With CSS

ul li中的图像垂直对齐

2 个答案:

另见：