center divの1つ別のdiv内にdivを配置する - 中心を整列する

Question

回転したテキストでタブを作成しています - 別のdivの中に1つの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内に1つのdivを中央に配置するにはどうすればよいですか？

Answer 1

トランスフォームは要素を中心点で回転させるため、変換の前に<span>の中心をサイドバーの中央に配置する必要があります。

まず、top:50%ラッパーdivは必要ありません。スパンですべて実行できます。

• 変換と追加のスタイルの前に、サイドバーの左上隅にスパンが表示されます。

• width:500pxを加える。中心を正確に配置するには、スパンは固定幅、たとえば500ピクセルでなければなりません。テキストはこれより長くなることはないと仮定しています。

• 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/