在梯形內對齊文本

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; 在.headersection的CSS中，然后我添加了以下內容：

     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許可的某人 。}