使用位置：绝对值在容器和jQuery中

Question

All, I'm trying to get my positioning set up and I'm having some issues with it. You can view the code here:

http://jsfiddle.net/treeleaf20/2cwQp/

I'm trying to get the reviews to always be in the center of the reviews_container. You can click on the arrows and it will actually change the text. I'd like to make it so that the reviews that come up are display vertically in the middle with the arrows on the side of them in the middle. Any help you could provide would be greatly appreciated! I found the only way I can rotate the reviews and have them look good is through absolute positioning but them my other elements don't look right.

Thanks!

Answer 1

You can try setting the position of the outer container to relative , but you might have better luck using a CSS table-based layout:

<style type="text/css">   
#container {    
    display:table;    
    border-collapse:collapse;    
}         
#layout {    
    display:table-row;    
}           
#content {    
    text-align:center; 
    display:table-cell;    
}           
</style>        
<div id="container">    
    <div id="layout">    
        <div id="content"> 
            <!-- content here --> 
        </div>  
    </div>   
</div>