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，则应垂直和水平对齐，如上所示。

问题：

文字不会出现在图片的右侧。
图像垂直对齐但不是水平对齐。

看起来像这样：

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 float和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>

注意：

建立弹性容器（默认情况下，子元素[aka，flex items]将排成一行）。
图像容器（第一个子容器）将始终在父容器中垂直居中。
文本容器（第二个子容器）将占用父容器的所有剩余宽度。
建立嵌套的flex容器（为了将flex属性应用于子级）。
子元素将垂直对齐。
Spread three text elements evenly。
文本元素的水平居中列。

浏览器支持：

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

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

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

this answer中的更多详情。

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上看到它没有完全居中，因为右边的10px边距是图像和文字之间的间距。

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

2 个答案: