文本居中且居中于图像之上

Question

我正在尝试重新设计 magento 上的类别页面，以全宽和最大高度显示类别图像，并将类别标题显示在图像居中的同一个框中。

我已经使用以下代码成功地将类别图片和标题移动到页面包装器中

<move element="category.image" destination="page.wrapper" before="main.content" />
<move element="page.main.title" destination="page.wrapper" before="main.content"/>

HTML

<div class="amryw-container">
  <!-- Lorem Ipsum -->
  <div class="page-title-wrapper">
    <h1 class="page-title" id="page-title-heading" aria-labelledby="page-title-heading&#x20;toolbar-amount">
      <span class="base" data-ui-id="page-title-wrapper">Classic Wax Melts</span>
    </h1>
  </div>
  <div class="category-image"><img src="https://and-it.co.uk/test-store/pub/media/catalog/category/amryw-classic-wax-melts-banner.jpg" alt="Classic&#x20;Wax&#x20;Melts" title="Classic&#x20;Wax&#x20;Melts" class="image" /></div>
</div>

CSS

.amryw-container {
    display: contents;
}
.category-image {
    margin-bottom: 20px;
    align-self: center;
    display: contents;
}
.category-image .image {
    display: block;
    max-width: 100%;
    height: 340px;
    object-fit: cover;
}

但不知道如何让类别标题位于图像的中心。

如有任何建议，我们将不胜感激。

我正在尝试编辑的页面：https://and-it.co.uk/test-store/classic-wax-melts

我正在尝试复制的页面：https://amryw.co.uk/classic-wax-melts/

Answer 1

如果标题是文本元素，请将 text-align:center; 分配给其 parent。如果标题不是文本元素，您可以通过指定 display:inline-block;

来强制元素以这种方式运行

这是假设您使用的是 background-image（您应该使用）

这对您来说可能是一个更简单的解决方案：https://jsfiddle.net/8reLz1gk/1/

有关更多信息，请查看 W3：https://www.w3schools.com/css/tryit.asp?filename=trycss_image_text_center2

Answer 2

好吧，您可以将该图像设置为 div 的背景图像。然后简单地在中间显示文本。

index.html:

<div class="container">
   <p>TEXT HERE</p>
</div>

style.css:

.container {
  background-image: url("./img.jpg");
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container p {
  color: rgb(65, 150, 107);
  font-size: 32px;
}

像这样：

Answer 3

新答案：

嗯，在我的 html 中，我在我的 img 周围放了一个 div，所以我可以给它一个 overflow: hidden;。我给了 'img' 和它周围的容器 height :100%。使用 overflow: hidden; 图像保留在容器内。现在我有了一个图像，与我的容器大小完全相同。\

现在 'p'。我花了一些时间才想出这个主意：
我首先给出了我的 'p' height: 100%;，因此它与包含 img 和 p 标签的 div 具有相同的高度。
现在我使用 transform: translateY(-100%);，它向上移动了 p 标签。现在 p 标签和 img 在同一个地方，占据相同的 space（两者具有相同的高度）。
为了使我的 'p' 居中，我只是使用 flex 属性。

index.html

<div class="container">
    <div class="img-container">
        <img src="./img.jpg" alt="">
    </div>
    <p>text</p>
</div>

style.css:

.container {
  width: 400px;
  height: 300px;
}

.container img {
  width: 100%;
}

.img-container {
  overflow: hidden;
  height: 100%;
}

.container p {
  height: 100%;
  transform: translateY(-100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 4

在另一位用户的帮助下找到了答案，因此将其发布以供其他人使用。

通过删除两个基本块 category.image 和 page.main.title 并创建自定义块来实现。

catalog_category_view.xml

在你的主题 \ 模块中创建你的 PHTML：（注意，如果你有一个继承自 Luma 的自定义主题，你可以将它放在里面：Magento_Catalog\templates\category\view\custom_category_title.phtml,

<referenceContainer name="category.view.container">

    <block class="Magento\Catalog\Block\Category\View" name="custom.category.top.view" template="category/view/custom_category_title.phtml"/>

</referenceContainer>
<referenceBlock name="category.image" remove="true"/>
<referenceBlock name="page.main.title" remove="true"/>

相反，如果您只有一个自定义模块，则必须将 Layout.xml [catalog_category_view] 和模板 [custom_category_title] 放入模块中：Vendor_Module\view\frontend\layout\catalog_category_view.xml 和 Vendor_Module\view\frontend\templates\category\view\custom_category_title.phtml)

\category\view\custom_category_title.phtml

<?php

/**
 * Category view template
 *
 * @var $block \Magento\Catalog\Block\Category\View
 */
    $_currentCat = $block->getCurrentCategory();
    $categoryTitle = $_currentCat->getName();
    $categoryImage = $_currentCat->getImageUrl();

?>

<div>
   <div class="category-image-custom">
       <img title="<?=$categoryTitle?>" alt="<?=$categoryTitle?>" src="<?=$categoryImage?>">
       <h1><?=$categoryTitle?></h1>
   </div>
</div>

最后，CSS

.category-image-custom img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: top;
    margin: auto;
    height: 300px;
}

.category-image-custom h1 {
    position: absolute;
    bottom: 50%;
    right: 40%;
    font-size: 30px;
    font: 400 50px/1.2 Poiret One, Helvetica Neue, Verdana, Arial, sans-serif;
    color: #fff;
}

.category-image-custom {
    margin-bottom: 20px;
    width: 100%;
    align-self: center;
    position: relative;
    flex-wrap: wrap;
    display: flex;
}

希望这对其他想做同样事情的人有所帮助！

文本居中且居中于图像之上

Text centred and middle over image

css

magento

magento2

新答案：