我的div中的标签/文字不会显示

Question

我的旋转木马看起来像这样：

我无法正确显示标签。

以下是我创建一个方框的方法：

<div class="tl-box-wrapper">
    <div class="tl-box">
        <div class="tl-top"> <i class="fa fa-circle yellow"></i>

        </div>
        <div class="tl-bot"> <i class="fa fa-circle yellow"></i>

        </div>
        <div class="tl-right">Yellow</div>
    </div>
</div>

如您所见，我在这里创建了我的标签：

<div class="tl-right">Yellow</div>

我不确定为什么黄色没有显示。

有人能告诉我我错过了什么吗？我的整个代码都在Fiddle。

Answer 1

使用以下内容编辑您的CSS：

.tl-right {
    width:80%;
    height:100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    // ADD THIS
    font-size:20pt;


}

请参阅我制作的fiddle

您在.mp-carousel的代码＃mp-carousel-overflow包含font-size：0pt，这基本上意味着您的字体不可见。

Answer 2

您的文字未显示，因为.mp-carousel #mp-carousel-overflow将您的font-size设置为0.您可以将font-size:14px添加到.tl-right以解决此问题。

https://jsfiddle.net/mxwjtjxw/10/