用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 × 100，它应该像上面所示的那样垂直和水平对齐。

问题:

1. 文本不会移到图像的右侧。
2. 图像是垂直对齐的，但不是水平对齐的。

它看起来像这样:

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浮动和表属性不是为构建布局而设计的，您的代码过于复杂。这并不是说不可能，也不是传统和流行，只是这不是最简单或最有效的完成任务的方法。

如果你对更现代的技术持开放态度，构建你的布局会更简单、更容易。特别是，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>

指出:

1. 建立flex容器(子元素[aka, flex项]将默认排成一行)。
2. 图像容器(第一个子容器)将始终垂直居中于父容器。
3. 文本容器(第二个子)将占用父容器的所有剩余宽度。
4. 建立嵌套的flex容器(以便将flex属性应用于子容器)。
5. 子元素垂直对齐。
6. 均匀展开三个文本元素
7. 文本元素水平居中列。

---

浏览器支持:

Flexbox被所有主流浏览器支持，除了IE 8 &9 .

一些最新的浏览器版本，如Safari 8和IE10，需要厂商前缀。

要快速添加所需的所有前缀，请使用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
}

你可以看到它没有完全居中，因为图像和文本之间的距离为10px。