Question

我在这里尝试了多种解决方案，但出于某些原因，这些解决方案并不适用于我。

您可以在此处查看测试版本：http://sint-lucia.sintelisabeth.be/testva.php

我想要的只是左边的文字（动态高度）与照片的高度垂直对齐。

我尝试使用行高=照片高度，没有运气（文字在照片高度的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;
}

Answer 1

只为两个元素执行此操作： - 带有描述+图像的容器

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;
}

http://jsfiddle.net/FeAHJ/21/
http://jsfiddle.net/FeAHJ/21/show

Answer 2

删除float的{{1}}以及.slide-desc代码img的{{1}}，将其更改为width。将其添加到样式表中。

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. }宽度，请通过添加包含div类名称来定位img。我无法在测试页面页面中找到包含div的类名，以及为什么我只使用img标记进行定位。

在无序列表元素内垂直对齐容器div

2 个答案: