css - 垂直对齐不起作用

Question

请不要将其标记为重复，因为我已经获得了所有正确的代码(据我所知)，而且我认为有些东西不知何故超过了它。使用了 Chrome Inspector，但没有发现任何问题。

我正在尝试垂直对齐框中的文本(我不想将它们全部单独标识并填充它们，就好像文本需要更新然后 css 也需要更新一样)。

代码如下:

CSS:

.draggable{ 
    color: #ffffff;
    background-color:#EE3C96;       
    display:table-cell;
    vertical-align:middle;
    font-size:12px;
    font-weight:bold;
    text-align: center;
    width: 90px;
    height:90px;
    float: left;
    margin-left: 10px;
    padding: 5px; 
}

HTML:

<div class="draggable">
        Lost time - employee absence
        </div>

        <div class="draggable2">
        "Safe Place" to work
        </div>

        <div class="draggable">
        Lost resources - employees leaving
        </div>

        <div class="draggable">
        Financial penalties
        </div>

在 Codepen 上:

http://codepen.io/lbarnes/pen/vkrib

draggable 和 draggable2 本质上是相同的(需要将它们分开，因为它在 jQuery 中使用:)

在此先感谢，希望有人能找到一些东西，因为我已经尝试了一切，哈哈!

Answer 1

我建议您使用双跨度 Nib 来垂直对齐多行文本。

First, a simple exemple

现在，根据您的需求进行调整:

<div class="draggable">
    <span><span>
        Lost time - employee absence
    </span></span>
</div>

<div class="draggable2">
    <span><span>
        "Safe Place" to work
    </span></span>
</div>

您可以保留当前的 ​​HTML 标记，并通过 jQuery 添加这些跨度(我不推荐这样做):

$('.draggable, .draggable2').contents().wrap('<span><span></span></span>');

然后，添加此 CSS 以获得垂直对齐方式:

/* Vertical align */
.draggable, .draggable2 {
    display: block;
    width: 90px; height: 90px;
    line-height: 90px;
}
.draggable>span, .draggable2>span {
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}
.draggable>span>span, .draggable2>span>span {
    line-height: 20px;
}

Your CodePen forked