如何在具有百分比高度的div中垂直居中文本？

12 浏览
0 Comments

如何在具有百分比高度的div中垂直居中文本？

这个问题已经在这里有答案了:

如何在div中垂直对齐文本？

这就是我现在拥有的。在其他div中使用vertical-align:middle并将line-height设置为与height属性相同的值，应该会起作用！唯一的问题是，在这些div中，我使用了像素维度而不是百分比。有人能告诉我为什么这无法使用百分比吗？同时，将text-size设置为50％也应该使文本大小减半，但实际上它仍然非常小？这里发生了什么？

#chooseStateAlabama {
    width: 20%;
    height: 25%;
    top: 0;
    left: 0;
    position: absolute;
    background: url(../_images/_unitedStates/_states/chooseStateAlabama.png);
    background-size: 100% 200%;
    float: left;
    color: #FFFFFF;
    font-family: Arial;
    font-style: normal;
    font-weight: bold;
    font-size: 50%;
    line-height: 25%;
    text-align: center;
    vertical-align: middle;
}

admin 更改状态以发布 2023年5月24日
0

2 答案

0 Comments

如果您可以更改标记，您可以使用很多方法来获得您想要的结果。

http://jsfiddle.net/vvpn6cge/

因为您有文本（我猜可能是一行或多行文本），那么您可以使用CSS表单元格来获得结果（请参见fiddle）。

.outer-container {
   display: table;
   width: 100%;
}
.txt-vertical-align {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

0
0 Comments

您可以在文本旁（在文本之前或之后）使用display:inline-block、height:100%和vertical-align:middle来处理单个元素或伪元素：演示

#chooseStateAlabama:before {/* this can be an extra tag within HTML structure if pseudo used for other purpose */
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

如果您有更多的内容或超过1行，则使用元素将其包装起来，同样将其应用于显示和垂直对齐。 DEMO2 以查看其行为

0