Html 无序列表元素中容器div的垂直对齐

我尝试了这里找到的多种解决方案，但由于某些原因，这些解决方案对我不起作用

基于：

您可以在此处看到测试版本：

我只希望左边的文字动态高度与照片的高度垂直对齐

我试着用线条高度=照片高度，在50%的照片高度上没有运气文本，但线条之间的空间是li元素的高度

这是我的CSS：

body {
     background: #000; font-family: Verdana, Arial, sans-serif;
}

img {
     width: 65%;
}

ul li {
     display: table;
     vertical-align: middle;
     margin-bottom: 20px;
}

h1 {
     font-size: 24px;
}

p {
     font-size: 18px;
}

.container {
     width: 1024px;
     margin-left: auto;
     margin-right: auto;
     background: #fff;
     padding: 30px;
}

.slide-desc {
     float: left;
     width: 35%;
     text-align: center;    
     display: table-cell;
     vertical-align: middle;
}

---

只需对这两个元素执行此操作： -包含描述+图像的容器

html {
    font-size:1em;
}
img {
    width:auto;
    max-width:100%;
    height:auto;
}
ul {
  list-style:none;
  padding:0;
}
/*  Fix to remove white space in inline-block elements */
ul li {
  font-size:0;
}
ul li > div {
  font-size:16px;
}
.slide-desc {
   width:35%;
   text-align:center;
 }
.image-container {
    width:65%;
    text-align:right;
}
.slide-desc,
.image-container {
   display:inline-block;
   vertical-align:middle;
}

移除滑动描述的浮动，并且img标签的宽度为65%，将其更改为100%。将其添加到样式表中

.slide-desc{
    float:none; //Add this line
    float: none !important; // add this line if the float left is added to this element by some script
}

img{
    width:65% // change this to below
    max-width:100%; //this will set max-width 100% for all the img tags in you site.
}

---

如果您不希望所有img标记都具有100%的宽度，请通过添加包含的div类名以img为目标。我在测试页中找不到包含div的类名，这就是我仅使用img标记的原因。

这对于图像来说是一个很好的观点。@JohanVandenRym您是对的，设置max width将是理想的选择。谢谢，我将更新我的答案。在描述容器中添加了一些填充，否则文本在某些情况下会与图像接触。