css - 垂直文本对齐

Question

我有一个不同长度的垂直页面标签，即新闻、奖项、出版物。我希望文本从同一个顶点开始（如果文本是水平的，那将是正确的）并从该点向下。我必须使用内联样式将文本向下推到正确的位置。我尝试将高度和宽度设置为 500，这似乎适用于对齐，但会将 div 推到正确的位置。

.vert_text {
position: relative;
color: #fff;
text-transform: lowercase;
font-family: Arial;
font-size: 6em;
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
float:left;
width:100px;
}

<div class="vert_text">
news
</div>
<div class="vert_text">
publications
</div>

Answer 1

使用 line-height 并定义一个高度，例如：

.vert_text {
    height:6em;
    line-height:6em;
}

看到这个工作小提琴。

Answer 2

.var_text{
margin-top:0px;
}

或者

删除位置：相对

然后加

边距：0px 或边距顶部：0px；