在梯形内对齐文本

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行代码"(在此存档.)©2016年由CC BY-SA 3.0许可的某人.}