垂直中心旋轉的文本與CSS

我有以下HTML：垂直中心旋轉的文本與CSS

<div class="outer"> 
    <div class="inner rotate">Centered?</div> 
</div>

div.outer是一個窄的垂直條帶。 div.inner旋轉90度。我希望文本「居中？」出現在它的容器div的中心。我不知道任何div的大小。

結束語：http://jsfiddle.net/CCMyf/2/。您可以從jsfiddle中看到，在應用transform: rotate(-90deg)樣式之前文本是垂直居中的，但稍後會有所偏移。當div.outer短時，這尤其明顯。

是否可以在不知道任何尺寸的情況下垂直居中文本？我還沒有找到解決這個問題的transform-origin的任何值。

來源

2013-02-28 danvk

你反對設置'顯示：在元素table'？因爲垂直對齊動態div的「標準」方式應該可以正確使用轉換：http://stackoverflow.com/a/6182661/188221 – DigTheDoug 2013-02-28 15:13:16

我不反對'''display：table'''。這個小提琴表明，表格解決方案與上述問題具有相同的問題：http://jsfiddle.net/4d384/ – danvk 2013-02-28 18:19:53

嘗試將'rotate'類放在中間元素上。應該這樣做，但它看起來像弄亂了物品的寬度。可能不得不使用填充或寬度或高度的道具，但它應該是可行的：http://jsfiddle.net/digthedoug/jWYuq/ – DigTheDoug 2013-02-28 19:16:07

的關鍵是要設定的位置的頂部和左至50％，然後transformX和transformY至-50％。

.inner { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 

.rotate { 
    transform: translateX(-50%) translateY(-50%) rotate(-90deg); 
}

見：http://jsfiddle.net/CCMyf/79/

來源

2014-06-19 21:28:13 bjnsn

這是我見過的最好的解決方案之一。 Thx – grayson 2015-11-22 01:25:27

這是深夜，我不知道爲什麼這個工程，但是當我按下ctrl-R ......我很少會得到這樣的「它只是工作」的時刻。我的下巴非比喻地掉了下來！ – TotoTitus 2015-12-12 22:24:45

使用文本元素而不是div我必須在內部元素上添加「margin：0」以使文本完美。 – kapser 2016-04-25 12:33:50

您能否將margin: 0 auto;添加到您的「旋轉」類中以居中文本。

.rotate { 
    -webkit-transform: rotate(-90deg); 
    -ff-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    width: 16px; /* transform: rotate() does not rotate the bounding box. */ 
    margin: 0 auto; 
}

來源

2013-02-28 15:04:12 97ldave

這不起作用。這裏的小提琴用「margin：0 auto」更新：http://jsfiddle.net/CCMyf/3/。你可以看到「？」在「居中？」比「C」更接近頂部。 – danvk 2013-02-28 18:00:40

刪除：margin-top: -7px;從.inner製成中心對我來說是垂直旋轉文本。它還使橫向文本不居中。

只要刪除上面的代碼？

來源

2013-02-28 15:05:38 Michael

這可能會使它更接近居中，但它仍然沒有正確對中。你可以在這個版本的小提琴中清楚地看到這一點：http://jsfiddle.net/CCMyf/4/ – danvk 2013-02-28 18:02:22

你可以補充一點：

$('.inner').css('margin-top', $(this).parent().height() - 2*$(this).height());

要將.on('change')功能，你可以在這裏看到：http://jsfiddle.net/darkajax/hVhbp/

來源

2013-02-28 15:08:25 DarkAjax

這可以工作，但如果可能的話，我會非常喜歡CSS解決方案。 – danvk 2013-02-28 18:13:13

您是否找到CSS解決方案？ – Crashalot 2013-12-10 06:12:43

這可能有點晚了回答這個問題，但我無意中發現了同樣的問題並找到了一些方法來實現它，通過添加另一個div的方式。

<div class="outer"> 
    <div class='middle'><span class="inner rotate">Centered?</span></div> 
</div>

和中間元素上應用text-align: center，一些定位沿着東西：

.middle { 
    margin-left: -200px; 
    width: 400px; 
    text-align: center; 
    position: relative; 
    left: 7px; 
    top: 50%; 
    line-height: 37px; 
}

的.inner也得到了display: inline-block;同時啓用rotate和text-align性能。

這裏是相應的小提琴：http://jsfiddle.net/CCMyf/47/

來源

2014-03-20 11:41:45

從「bjnsn」答案是好的，但並不完美，因爲它在文本包含在它的空間失敗。比如他用'居中？'作爲文字，但如果我們改變了文字讓假設'中心？或不「，那麼它將無法正常工作，並會在空間後採取下一行。 Ther沒有爲內部div塊定義寬度或高度。

.inner { 
    font-size: 13px; 
    font-color: #878787; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    background: #DDD; 
}

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ 但是，我們可以使整個文本居中對齊正確，通過設定內的div寬度等於外股利高度，行高內的div等於外層的div和設置的寬度使用align-items：center和justify-content：center屬性顯示inner div的flex屬性。

.inner { 
    font-size: 13px; 
    font-color: #878787; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    display: flex; 
    justify-content:center; 
    align-items:center; 
    line-height:40px; 
} 
$('#height').on('change', function(e) { 
    $('.outer').css('height', $('#height').val() + 'px'); 
    $('.inner').css('width', $('#height').val() + 'px'); 
});

更新小提琴https://jsfiddle.net/touqeer_shakeel/cjL21of5/

來源

2016-09-30 10:35:05 user3809178

垂直中心旋轉的文本與CSS

回答

相關問題