Geek Answers Handbook

Center one div inside another div - align the centers

I create a tab with rotated text - I try to center one div inside another, but I want the divs centers to be aligned, but I get alignment problems:

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

how can i center one div inside the larger parent div vertically so that my rotated text is centered?

+5
source share
1 answer

Transforms rotate elements at their center point, so you need to place your <span>center in the center of the sidebar before transformations.

First of all, you do not need a top:50%wrapper div, you can do it all in between.

  • .

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

+5

More articles:


All Articles