使用CSS垂直居中旋转文本
使用CSS垂直居中旋转文本
提问于 2013-02-28 23:00:44
我有以下HTML：
<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的值。
回答 7
Stack Overflow用户
回答已采纳
发布于 2014-06-20 05:28:13
关键是将位置顶部和左侧设置为50%，然后将transformX和transformY设置为-50%。
.inner {
position: absolute;
top: 50%;
left: 50%;
}
.rotate {
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}Stack Overflow用户
发布于 2014-03-20 19:41:46
现在回答这个问题可能有点晚了，但我偶然发现了同样的问题，并找到了一些实现它的方法，通过在其中添加另一个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/
Stack Overflow用户
发布于 2013-02-28 23:04:12
你能在你的“旋转”类中添加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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15138723
复制相关文章
相似问题