在梯形内对齐文本

Question

我使用CSS创建了一个右梯形，我添加了一些文本。我的问题是我无法垂直对齐div中的文本。我的步骤显示在问题的底部。首先，我的代码如下所示：

HTML：

<div class="headersection">
    <div class="logosection">TEXTtext</div>
</div>

CSS：

body {
    margin:0;
}

.headersection {
    background-color:#222939;
    width:100%;
    height:75px;
    line-height:0;
    z-index:1;
    color:white;
}

.logosection {
    width:120px;
    border-bottom: 75px solid #ff0000;
    border-right: 75px solid transparent;
}

其次，使用上面的代码我得到了这个结果，你可以看到文本没有对齐：

我尝试在display: table;的CSS中添加.headersection，然后我添加了这个：

     display: table-cell;
 vertical-align: middle;

.logosection

中的

另外，我尝试添加此内容：

display: flex;
justify-content: center; 
align-items: center;

.logosection

中的

它是水平对齐但不是垂直对齐：

Answer 1

您可以使用line-height并将其设置为div的高度：

.logosection {
    line-height: 75px;
    width:120px;
    border-bottom: 75px solid #ff0000;
    border-right: 75px solid transparent;
}

这是一个小提琴：https://jsfiddle.net/0q831mq1/

还有另一种使用变换的技术：

div.parent {
    border: 2px solid black;
    height: 150px;
}

div.vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

<div class="parent">
<div class="vertical">Vertical aligned text!</div>
</div>

^{此代码示例基于SO文档示例“垂直对齐3行代码”（已归档here。）©2016 Someone CC BY-SA 3.0许可。< / SUP>}