Question

我正在创建一个带有旋转文本的标签 - 我试图将一个div放在另一个div中，但是我希望div的中心对齐，但我遇到对齐问题：

<div class="tileStrip" style="position:relative;width:100%;height:185px;background:#DDDDDD;">
    <div class ="clickToSlide" style="position:absolute;height:100%;width:30px;background:#AAAAAA">
     <div style="position:relative;top:50%">    
       <span style="    font-weight:bold;color:white;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);display:block;">International</span>
    </div>
    </div>
</div>

如何将一个div垂直放在一个较大的父div中，以便我的旋转文本居中？

Answer 1

转换按中心点旋转元素，因此您需要在转换前将<span>的中心定位到侧边栏的中心。

首先，您不需要top:50%包装div，您可以在跨度上完成所有操作。

在转换和任何其他样式之前，您的范围将显示在侧边栏的左上角。
添加width:500px。为了精确定位中心，跨度必须是固定宽度，比如500px。我们假设没有文字比这更长。
添加text-align:center。现在文本在我们的固定宽度范围内正确居中，尽管跨度本身位于错误的位置。
添加position:relative，因此我们可以调整范围相对于其原始位置的位置。
添加top:50%和margin-top:-10px。当50％设置顶部边缘时，我们需要补偿负上边距以垂直居中。 10px是跨度高度的一半。
添加left:50%和margin-left:-250px，与上面相同，水平居中跨度。 250px是量程固定宽度的一半。
最后添加你的转换，它应该正确居中。

结果HTML：

<div class="tileStrip" style="position:relative;width:100%;height:185px;background:#DDDDDD;">
    <div class ="clickToSlide" style="position:absolute;height:100%;width:30px;background:#AAAAAA">
       <span style="font-weight:bold;color:white;display:block;text-align:center;width:500px;position:relative;top:50%;margin-top:-10px;left:50%;margin-left:-250px;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);">International</span>
    </div>
</div>

演示：http://jsfiddle.net/jHrEm/7/

将一个div放在另一个div内 - 对齐中心

1 个答案: