Question

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

错误的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;
}

根据this帖子，应该在

标记上使用position:relative之后，该问题已经解决，但是可悲的是并没有解决我的问题。

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

谢谢您的时间！

Answer 1

<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 中居中（至少），

使用position: absolute将 p 标签从正常流程中删除（这将有助于正确定位它，但也会使其消失在图像后面）
使用z-index: 2

p

并将 p 标记垂直居中：

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

这是更新后的fiddle

一个更优雅的解决方案可能涉及切换策略并将图像用作背景。这样会将 img 标签从内容流中删除，从而使文本居中，而无需绝对定位和z-indexing。

Answer 2

您应将p元素的位置设置为固定，然后赋予50%和top中的left：

.front p {
  position:fixed;
  text-align: center;
  color:white;
  top:50%;
  left:50%;
  z-index:3;
}

以下是实时结果（jsfiddle）。有关更多信息，请检查this。

<div>中的HTML文本未显示

2 个答案: