响应式图像大小调整，列表项中的文本垂直居中

Question

我的目标是并排放置 3 张图像，其中文本在垂直和水平居中，并且图像 响应式

根据我的理解，当在父元素中垂直居中时，父元素应该是绝对的，子元素应该是相对的，并且在执行 top: 50% 后翻译 -50%。

我这里有一个代码笔：http://codepen.io/anon/pen/ozyJBP

但似乎有些不对劲。当我注释掉 position: relative 然后取消注释时，它永远不会恢复到原来的状态。

我试图保持图像的纵横比，但现在我什至无法弄清楚为什么文本不能垂直居中。我的真实代码更接近于底部 UL。

HTML:

<ul>
    <li><p>On Sale</p><img src="http://placehold.it/300x180"/></li>
    <li><a href="#"><p>Special Offers</p><img src="http://placehold.it/300x180"/></a></li>
    <li><a href="#"><p>Must Have</p><img src="http://placehold.it/300x180"/></a></li>
</ul>

<br><br><br><br><br>


        <ul id="offersList">
            <li id="onSaleBG">
                <div class="offers">On Sale</div>
            </li>
            <li id="specialOffersBG">
                <div class="offers">Special Offers</div>
            </li>
            <li id="mustHaveBG">
                <div class="offers">Must Have</div>
            </li>
        </ul>

CSS:

li {
    display: inline-block;
    position: relative;
}

ul li p {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    transform: translateX(-50%);
    background: #2f3134;
    padding: 20px 25px;
    display: inline-block;
    color: white;
}



#onSaleBG {
    background: url(http://placehold.it/300x180) no-repeat;
}

#specialOffersBG {
    background: url(http://placehold.it/300x180) no-repeat;
}

#mustHaveBG {
    background: url(http://placehold.it/300x180) no-repeat;
}

.offers {
    background: #2f3134;
    padding: 20px 25px;
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#offersList li {
    height: 180px;
    width: 300px;
    color: white;
    position: relative;
}

Answer 1

为什么不使用显示：包装器上的 table 和子单元上的 table-cell。这是最简单的垂直对齐方式，没有实际 table 的混乱。此外，它们会彼此对齐，如果单元格设置为 33.3% 宽，它们会响应，并且可以轻松覆盖移动设备以垂直放置图像。

Answer 2

您可以在 #offersList li 元素上使用 flexbox，并删除 .offers

上的 top 和 transform 属性

#offersList li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Answer 3

主要问题是你的 translate 设置：要将它同时用于 x 和 y 轴，你必须这样写（在 ul li p), 否则第二个 translate 会覆盖第一个:

  transform: translate(-50%, -50%);

此外，您必须向此规则添加 margin: 0 才能重置默认页边距。所以完整的规则是：

ul li p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  margin: 0;
  padding: 20px 25px;
  background: #2f3134;
  color: white;
}

Codepen 使用此解决方案：http://codepen.io/anon/pen/vXAbVy

响应式图像大小调整，列表项中的文本垂直居中

Responsive image sizing with vertically centered text in List items

html

css

image

vertical-alignment

responsive-design