时间戳

首页 > 解决方案 > 里面的 HTML 文本

没有出现

html - 里面的 HTML 文本
没有出现

问题描述

我试图创建一张卡片，如果鼠标指针悬停在卡片上，它会以 3D 形式旋转。我已经成功添加了卡片正面的背景和图像，但是当尝试向其添加文本时（即尝试向 div 元素添加文本时），它不显示。

错误的html代码：

    <div class="front">
        <div class="front_card_icon">
            <img src="image/indoor_plants_icon_white.svg">
        </div>

        <p>THIS TEXT IS THE PROBLEM</p>
    </div>

错误的css代码：

.front {
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    position: absolute;
    transition: transform .6s linear;
    background-color: #2D3436;
}

.front_card_icon{
    position: relative;
    bottom: 8%;
    transform: scale(0.70);
    z-index: 2;
}

.front p {
  positon:relative;
  text-align: center;
  color:white;
}

根据这个帖子，问题应该已经在使用后解决position:relative了

标签，但遗憾的是这并没有解决我的问题。

这是我的问题的jsfiddle。请注意，文本已正确显示，因为无法加载图像。但是，加载图像时，不会显示文本，尽管图像是透明的。

感谢您的时间！

标签： htmlcss

解决方案

<div class="front">
    <div class="front_card_icon">
        <img src="image/indoor_plants_icon_white.svg">
    </div>

    <p>Text to be centered vertically on top of image</p>
</div>

您的 p 标签位于图像下方，因此文本被其父容器向下推和隐藏。

要在其父div中居中文本（最少），您必须：

  1. 使用（这将有助于正确定位它 - 但也会导致它消失在图像后面）将p标签从正常流程中打破position: absolute

  2. 将p标签带回顶部z-index: 2

  3. 并将p标签垂直居中：

   position:absolute;
   top: 50%;
   transform: translateY(-50%);

这是更新的小提琴

更优雅的解决方案可能涉及切换状态并将图像用作背景。这会将img标签从内容流中取出，允许文本居中而无需绝对定位和 z 索引。

推荐阅读