垂直文本對齊

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

使用行高和定義的高度例如：

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

看到這個工作fiddle。

Answer 2

.var_text{ 
margin-top:0px; 
} 

或

刪除位置：相對

然後添加

餘量：0像素或邊距：0像素;