居中對齊文字在旋轉的三角形中

我創建了一個包含旋轉文字的CSS三角形。文本將根據不同的市場和語言而改變，因此將具有不同的長度。我需要它始終處於中心位置，我無法讓它工作，特別是當文本分成兩行時。居中對齊文字在旋轉的三角形中

我試着旋轉父元素而不是文本元素，我一直在測試transform-origin屬性和邊距，但仍然沒有運氣。

謝謝！

我的HTML：

<div class="container">      
    <div class="badge">      
     <div class="badge-text"> 
      Test 
     </div> 
    </div> 
</div>

我的CSS：

.container { 
    position: relative; 
} 

.badge { 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 0 100px 100px 0; 
    border-color: transparent #2864cb transparent transparent; 
    position: absolute; 
    right: 0; 
    top: 0; 
    color: white; 
} 

.badge-text { 
    position: absolute; 
    margin: 25px; 
    text-align: center; 
    text-transform: uppercase; 
    width: 85px; 
    transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
}

來源

2014-04-02 Topr

測試似乎看上去沒什麼問題，有什麼錯呢？它似乎以中心爲好 –

問題是它不會包含一個單詞。如果您添加一個或兩個單詞到「測試」，它將嚴重對齊。 – Topr

我不認爲這是可實現的，因爲你的父div有0的寬度和高度，你的文本是可交換的 –

-1

我認爲最好的解決辦法是儘量將其放置在底部，可能的（所以它適合大的話），然後使它從一個邊緣延伸到另一個邊緣，所以文本總是居中，儘管這個詞的大小。試試這個（你可以刪除邊框）; http://jsfiddle.net/3NuF6/18/

.badge-text { 
    border: 1px solid; 
left: -15px; 
margin: 25px; 
position: absolute; 
text-align: center; 
text-transform: uppercase; 
top: 9px; 
transform: rotate(45deg); 
width: 95px;

}

更新：如果你想2個字的空間顯著小，所以嘗試這樣的事情還是我woudl建議大三角http://jsfiddle.net/3NuF6/20/

.badge-text { 
border: 1px solid; 
left: 3px; 
margin: 25px; 
position: absolute; 
text-align: center; 
text-transform: uppercase; 
top: -5px; 
transform: rotate(45deg); 
width: 75px;

}

來源

2014-04-02 09:23:15 user2211216

由於文本可以是可變長度的，我建議你添加以下2條CSS規則，

.badge-text { 
.. 

    overflow: hidden; 
    text-overflow: ellipsis; 

.. 
}

並在元素的title屬性中添加完整文本。

這將確保您覆蓋最差的情況，因爲IMO永遠無法始終將文本與變長對齊。

JS Fiddle:

MDN: text-overflow

來源

2014-04-02 09:24:48

居中對齊文字在旋轉的三角形中

回答

相關問題