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

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/