使用 CSS 垂直对齐列表项上的图像和文本

Question

我正在尝试使用 <li> 垂直对齐左侧的图像和右侧的文本来创建两列，如下所示：

space  space  space text1   space  space  space text1
space [image] space text2   space [image] space text2
space  space  space text3   space  space  space text3

space  space  space text1   space  space  space text1
space [image] space text2   space [image] space text2
space  space  space text3   space  space  space text3

每张图片的最大像素为 100x100。它们的尺寸不同。如果图像小于 100 x 100，则应如上所示垂直和水平对齐。

问题：

文本不会位于图像右侧。
图像垂直对齐，但不是水平对齐。

看起来像这样：

space   space space    space   space space 
[image] space space    [image] space space 
space   space space    space   space space
text1                  text1
text2                  text2
text3                  text3

space   space space    space   space space 
[image] space space    [image] space space 
space   space space    space   space space
text1                  text1
text2                  text2
text3                  text3

这些图片和文字的总宽度为 530 像素，因此有足够的空间。代码如下

对于那些不了解 Coldfusion 的人来说，CFQUERY 只是一个从数据库查询返回的项目数的循环：

.hcr ul {
  padding: 8px 5px;
  margin: 0;
}
.hcr li {
  margin: 0;
  padding: 0;
  float: left;
  width: 240px;
  padding: 10px;
  overflow: hidden;
  zoom: 1
}
.hcr .wrap {
  width: 100px;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #ddd
}
.hcr .image {
  width: auto;
  height: auto;
  max-width: 100px;
  max-height: 100px;
  vertical-align: middle;
}
.hcr img {
  float: left;
  display: inline;
  margin-right: 10px
}

<div class="hcr">
  <ul>
    <cfoutput query="querylist">
      <li>
        <span class="wrap">
    <a href="some.html"><img src="#image#" class="image"></a>
    </span>
        <a href="some.html">#text1#</a>
        <div>#text2#</div>
        <div>#text3#</div>
      </li>
    </cfoutput>
  </ul>
</div>

非常感谢任何帮助。谢谢。

已编辑：

我解决了其中一个文本问题，方法是将文本部分包裹起来：

.hcr .wrap2 {
  width: 100px;
  height: 100px;
  display: table-cell;
}

<div class="hcr">
  <ul>
    <cfoutput query="querylist">
      <li>
        <span class="wrap">
       <a href="some.html"><img src="#image#" class="image"></a>
       </span>
       <span class="wrap2">  
       <a href="some.html">#text1#</a>
       <div>#text2#</div>
       <div>#text3#</div>
       </span> 
      </li>
    </cfoutput>
  </ul>
</div>

图像仍然不会水平居中。

Answer 1

考虑到 CSS 浮动和 table 属性不是为建筑布局设计的，您的代码过于复杂。并不是说它不可能，甚至不是传统的和流行的，它只是不是完成任务的最简单或最有效的方法。

如果您对更现代的技术持开放态度，那么构建您的布局将会更简单、更容易。在这种情况下，CSS3 的 Flexbox 特别有用。

.hcr li {
    display: flex;                   /* 1 */
    width: 240px;
    padding: 5px;
    border: 1px dashed black;
}

.wrap1 {
    align-self: center;              /* 2 */
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}

.wrap2 {
    flex: 1;                         /* 3 */
    display: flex;                   /* 4 */
    flex-direction: column;          /* 5 */
    justify-content: space-around;   /* 6 */
    align-items: center;             /* 7 */
    border: 1px dashed red;
}

.hcr .image {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 100px;
}

<div class="hcr">
  <ul>
    <cfoutput query="querylist">
      <li>
        <div class="wrap1">
          <a href="some.html">
            <img src="http://lorempixel.com/100/100/" class="image">
          </a>
        </div>
        <div class="wrap2"><!-- new container -->
          <a href="some.html">#text1#</a>
          <div>#text2#</div>
          <div>#text3#</div>
        </div>
      </li>
    </cfoutput>
  </ul>
</div>

备注：

建立弹性容器（子元素[又名，弹性项目]默认排成一行）。
图像容器（第一个子容器）将始终在父容器中垂直居中。
文本容器（第二个子容器）将占用父容器的所有剩余宽度。
建立嵌套的 flex 容器（以便将 flex 属性应用于子容器）。
子元素将垂直对齐。
.
文本元素的水平居中列。

浏览器支持：

所有主流浏览器都支持 Flexbox，except IE 8 & 9。

一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes。

要快速添加所需的所有前缀，请使用 Autoprefixer。

中有更多详细信息。

Answer 2

在我的编辑中，通过用以下内容包裹文本部分解决了文本不向右移动的问题之一：

.hcr .wrap2 {
  width: 100px;
  height: 100px;
  display: table-cell;
}

<div class="hcr">
  <ul>
    <cfoutput query="querylist">
      <li>
        <span class="wrap">
       <a href="some.html"><img src="#image#" class="image"></a>
       </span>
       <span class="wrap2">  
       <a href="some.html">#text1#</a>
       <div>#text2#</div>
       <div>#text3#</div>
       </span> 
      </li>
    </cfoutput>
  </ul>
</div>

第二个问题已通过从 img

中删除行 float: left; 得到解决

.hcr img {
  display: inline;
  margin-right: 10px
}

您可以在 fiddle 上看到它没有完全居中，因为图像和文本之间的右侧有 10 像素的边距。

使用 CSS 垂直对齐列表项上的图像和文本

Vertically aligning image and text on list items with CSS

html

css

image

cfquery