CSS中的垂直文本位置按文本長度偏移

我試圖創建一個信息標記，它掛起頁面上的塊元素，但在獲取定位權時遇到了一些麻煩。要了解我想要做什麼，請參閱附件圖像。內容塊實際上是頁面上的右側欄。CSS中的垂直文本位置按文本長度偏移

enter image description here

<div class="contentblock"> 
    <span class="tag">tag</span> 
</div> 

div.contentblock{ 
    width: 575px; 
    float: left; 
    margin-left: 20px; 
    margin-top: 20px; 
    min-height: 300px; 
    display: block; 
    position: relative; 
    padding: 15px; 
    ... 
} 

span.tag{ 
    font-size: 14px; 
    margin-left: 495px; 
    color: rgba(65,65,66,0.6); 
    display: inline-block; 
    text-align: center; 
    text-transform: lowercase; 
    position: absolute; 
    margin-top: 115px; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 2px; 
    padding-bottom: 5px; 
    background: #fff; 
    margin-bottom: -145px; 
    min-width: 60px; 
    width: auto !important; 
    white-space: nowrap; 
    -webkit-transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -o-transform: rotate(90deg); 
    border: 2px solid rgba(65,65,66,0.5); 
    border-bottom: 0; 
}

這類作品 - 附加的圖像實際上是這個結果，但因爲標籤的水平位置似乎受到的長度影響它並不能很好地工作標籤。在<span pushes>中的文字更長（它也會將它垂直向下擴展 - 因爲它應該）。因此，標籤元素上的半任意邊距 - 恰好適用於一個特定的文本字符串。

我想我正在做這個錯誤的方式。什麼是更有效的方法來完成這個？

來源

2012-09-05 Yair

由於您未指定變換原點，因此它缺省爲元素的中間部分。結果，改變文本的數量將抵消中間並導致轉換改變。

您應該指定一個transform-origin（和所有供應商擴展）固定的東西，如左上角，然後根據該位置進行定位。

請注意，-ms-transform也是完美的功能。

來源

2012-09-05 22:28:57

我剛發佈這個問題後就想到了這個 - 這個工作非常完美！每個額外的角色都將旋轉的原點進一步推向右側 - 因此問題。 transform-origin：左上角;完美的作品。謝謝！ – Yair

我可能會建議您使用CSS2將標籤放置在元素的頂部，然後使用CSS3'transform'將該元素「翻譯」到右側？這將允許在舊版瀏覽器上優雅地降級。 –

不是使用頁邊距來定位標籤，而是嘗試將其「正確」屬性設置爲負值。例如，右：-10px。這會使標記的右邊緣位於塊右邊的右側10px。

來源

2012-09-05 22:27:53 AtkinsSJ

我一般都認同，但無論出於何種原因，在這種特殊情況下，它都會將標籤放在盒子的中間。可能還有其他寬度問題。 – Yair

CSS中的垂直文本位置按文本長度偏移

回答

相關問題