動態垂直文本垂直對齊問題

我有一些文本可能在不同的頁面上有所不同。我需要使它垂直居中。由於文字寬度較小，所以存在一些問題。動態垂直文本垂直對齊問題

.vertical-text-block { 
 
    width: 40px; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    float: left; 
 
    background-color: grey; 
 
} 
 
.vertical-text { 
 
    display: block; 
 
    position: relative; 
 
    top: 50%; 
 
    white-space: nowrap; 
 
    font-size: 10px; 
 
    text-transform: uppercase; 
 
    transform: translateY(-50%); 
 
    transform: rotate(-90deg); 
 
}

<div class="vertical-text-block"> 
 
    <span class="vertical-text">ASHWANI SHARMA</span> 
 
</div>

它應該看起來像下面附有影像：

來源

2016-11-04 Ashwani Sharma

包括你的標記 –

@ Ron.Basco完成！ –

我加right: 50%，transform-origin: right和刪除transform: translateY()

.vertical-text-block { 
 
    width: 40px; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    float: left; 
 
    background-color: grey; 
 
    background-image: linear-gradient(darkgrey 0%, darkgrey 50%, lightgrey 50%); 
 
    background-repeat: no-repeat; 
 
} 
 
.vertical-text { 
 
    display: block; 
 
    position: relative; 
 
    top: 50%; 
 
    right: 50%;      /* 1 */ 
 
    white-space: nowrap; 
 
    font-size: 10px; 
 
    text-transform: uppercase; 
 
    /*transform: translateY(-50%);*/ /* 2 */ 
 
    transform: rotate(-90deg); 
 
    transform-origin: right;   /* 3 */ 
 
}

<div class="vertical-text-block"> 
 
    <span class="vertical-text">ASHWANI SHARMA</span> 
 
</div>

來源

2016-11-04 06:28:14 Nhan

感謝@Nhan的回答。它有一點幫助，但如果文字稍大一些（例如：「美國領導力指數」），那麼它會移到頂端而不是中間位置。 –

我想你也能做到這樣http://codepen.io/Danstan/pen/QGWggO 只需正確添加的平移X和translateY上.vertical文本一切都將在

.vertical-text { 
font-size:8px; 
text-transform: uppercase; 
position: absolute; 
top: 50%; 
left: 50%; 
white-space: nowrap; 
-webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg); 
transform: translateX(-50%) translateY(-50%) rotate(90deg); white-space: nowrap;font-size: 10px;}

來源

2016-11-04 07:55:21

它不適用於不同的字符長度 –

我做了小改動，以中心DOM並且能夠實現它，即將文本居中，不管其長度如何。。

對DOM做了一些小修改。

<div class="vertical-text-wrap"> 
<div class="vertical-text-block"> 
</div> 
<span class="vertical-text">American Leadership Index</span> 
</div>

增加了一個額外的包裝，希望它是允許。這裏

.vertical-text-wrap { 
 
    position: absolute; 
 
    height: 100%; 
 
    margin: 0px 20px; 
 
} 
 
.vertical-text-block { 
 
    width: 40px; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    float: left; 
 
    background-color: grey; 
 
} 
 
.vertical-text { 
 
    display: inline-block; 
 
    position: relative; 
 
    top: 50%; 
 
    left: -35%; 
 
    font-size: 10px; 
 
    text-transform: uppercase; 
 
    transform-origin: 50% 50%; 
 
    transform: translateY(50%) rotate(-90deg); 
 
}

<div class="vertical-text-wrap"> 
 
    <div class="vertical-text-block"> 
 

 
    </div> 
 
    <span class="vertical-text">American Leadership Index</span> 
 
</div>

美中不足的是，當文字變短，中span.vertical-text的left位置必須調整。

但是，嘿，它是垂直居中:)

來源

2016-11-04 15:36:40 semuzaboi

動態垂直文本垂直對齊問題

回答

相關問題