CSS居中旋轉div中的文本

我正在設置一個我已經傳給我的設計。CSS居中旋轉div中的文本

設計需要左對齊div（class = banner）放置在外部div的左側。

這個div然後包含旋轉的文本（-90deg），它需要在div中居中和v居中。

問題是，這個文本可能有不同的高度，也有不同的長度和字體。

有沒有辦法讓我可以更新我的CSS，以確保文本總是在其父div的中心？

.banner 
{ 
    height:90%; 
    width:5%; 
    padding:5%; 
    text-transform: uppercase; 
} 

.rotated 
{ 
    position:relative; 
    float:left; 
    top: 50%; 
    left: 50%; 
    height: 2px; 
    margin-top: -1px; 
    margin-left: -100%; 
    text-align: center; 
    display:inline-block; 
    transform: translateX(-50%) rotate(-90deg); 
    white-space: nowrap; 
}

jsFiddle

來源

2017-02-07 Richard.Gale

尋求代碼幫助的問題必須包含在問題本身**中重現它所需的最短代碼**最好在[** Stack Snippet **]（https://blog.stackoverflow.com/2014/ 09 /引入可運行的JavaScript-CSS-和HTML的代碼段/）。請參見[**如何創建一個最小，完整和可驗證示例**]（http://stackoverflow.com/help/mcve） –

https://jsfiddle.net/yz3jL58y/ –

只需添加：

display: flex; 
justify-content:center;

到#Ticket財產。 https://jsfiddle.net/yz3jL58y/1/

來源

2017-02-07 12:04:29 pzworks

我希望綠色橫幅可以保留在左邊，但想要'新'（或任何文本）在綠色區域中居中。 –

這裏是小提琴 https://jsfiddle.net/yz3jL58y/2/ – pzworks

謝謝你的幫助彼得。該代碼出色地運行 - 在Chrome中。但是，我需要能夠生產使用IE9（因爲這是我們的項目本地）一切工作正常，除了旋轉的文字沒有居中（從頂部到底部）在橫幅（但它是在鉻）任何想法？ –

CSS居中旋轉div中的文本

回答

相關問題