Orta düğmeleri yatay ve dikey olarak

Bir kutuda yan yana oturup 3 div var. 3. (en sağdaki) div'in içinde bazı düğmeler var.

But these buttons are not centring themselves(I mean centred both Vertically & Horizontally). See the image where the blue boxes should be centred inside the red box, but they actually sit too high & too far to the left.

Can you help me get my blue buttons to sit centred horizontally & vertically?

!http://i42.tinypic.com/1z18ahs.png enter image description here



<head>
    <title> </title>

    
</head>
<body>

    

    <div id="mainContent">
        <div id="mainContentInner">

            <div id="featureBar">
                

            </div>

            <div style="float: left; width: 20px; height: 400px; margin: 10px; background-color: RGB(172,225,250);">
                

            </div>

            <!-- The 2 unordered lists in this div are supposed to be centred horizontally -->
            <div id="menuBar">
                
    
                    
  • 
                        <div class="button">
                            
    
                        </div>
                    
    • 
                    
  • 
                        <div class="button">
                            
    
                        </div>
                    
    • 
                    
  • 
                        <div class="button">
                            
    
                        </div>
                    
    • 
                

                

                
    
                    
  • 
                        <div class="button">
                            
    
                        </div>
                    
    • 
                    
  • 
                        <div class="button">
                            
    
                        </div>
                    
    • 
                    
  • 
                        <div class="button">
                            
    
                        </div>
                    
  • 
                

            </div>

        </div>
    </div>

    

    


</body>
</html>
0
katma
Görünümler: 6
kaynak
ro ru fr es pt de hi bn ar kk

1 cevap

Düğmeleri yatay olarak ortalamak için #menuBar genişliği 446px değil 450px olmalıdır.

Düğmeleri dikey olarak ortalamak için .button yüksekliği 190px ve #menuBar yüksekliği 395px olmalıdır.

Demo: http://jsfiddle.net/kvqpy/1/

0
katma
kaynak