垂直 - 对齐不起作用

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中使用：）

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

Answer 1

我建议您使用双跨度提示垂直对齐多行文字。

<强> 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

Answer 2

您可以将以下代码添加到可拖动类中以解决问题。移除display:table-cell

display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

这会使文本在div水平和垂直

中居中

适用于webkit浏览器。适用于Mozilla

display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

和IE

    display:-ms-box;
    -ms-box-pack:center;
    -ms-box-align:center;

有关browser support

的更多信息

Answer 3

您可以将文字放在<p></p>标记之间的框中，而不是在css中添加以下行：

.draggable p {vertical-align: middle;}
.draggable2 p {vertical-align: middle;}