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中的文本

回答

相关问题