Question

我的目标是并排放置3张图像，里面有垂直和水平居中的文字，图片响应

根据我的理解，当在父元素中垂直居中时，父元素应该是绝对的，并且孩子应该是相对的并且在做完顶部之后翻译-50％：50％。

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

但似乎有些不对劲。当我评论出位置：相对然后取消注释它时，它永远不会恢复原状。

我试图保持图像的宽高比，但现在我甚至无法弄清楚为什么文本不会垂直居中。我的真实代码更接近底层UL。

HTML：

import requests
from bs4 import BeautifulSoup, Tag
from pprint import pprint
headers = {'User-Agent': 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:21.0) Gecko/20130331 Firefox/21.0'}
response = requests.get("http://hortonworks.com/careers/open-positions/", headers=headers)

soup = BeautifulSoup(response.text, "html.parser")

jobs = []


div_main = soup.select("div#careers_list")


for div in div_main:
    department_title = ""
    for element in div:
        if isinstance(element, Tag) and "class" in element.attrs:
            if "department_title" in element.attrs["class"]:
                department_title = element.get_text().strip()
            elif "career" in element.attrs["class"]:
                location = element.select("div.location")[0].get_text().strip()
                title = element.select("div.title")[0].get_text().strip()
                job = {
                    "job_location": location,
                    "job_title": title,
                    "job_dept": department_title
                }
                jobs.append(job)

pprint(jobs)

CSS：

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

Answer 1

您可以在#offersList li元素上使用flexbox，并移除top上的transform和.offers属性

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

Answer 2

主要问题是您的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

Answer 3

为什么不在子包装上使用display：table，在子包装上使用table-cell。这是垂直对齐的最简单方法，没有实际表格的混乱。另外，如果单元格设置为33.3％宽，它们会相互排列，并且可以轻松覆盖移动设备以垂直放置图像。

在列表项中使用垂直居中的文本调整响应图像大小

3 个答案: