Css ile Table Özelliği

Sayfadaki objeleri ortalamak için div’e css kodlarıyla table özelliği verilerek div içindeki bütün objeleri sayfalaya ortalayabiliriz.

En dış div için display:table; yazarak table özelliği veriyoruz. İçinde bulunan div için display:table-cell; yazarak table içinde bulunan cell özelliği veriyoruz.

html dosyasına yazılan div

<div class=”container”>
        <div class=”orta”>
                        <img src=”14.jpg” width=”200″ height=”200″ />
        </div>
        <div class=”orta”>
                       <img src=”14.jpg” width=”200″ height=”200″ />
                      <img src=”14.jpg” width=”200″ height=”200″ />
        </div>
         <div class=”orta”>
                      <img src=”14.jpg” width=”200″ height=”200″ />
                     <img src=”14.jpg” width=”200″ height=”200″ />
                      <img src=”14.jpg” width=”200″ height=”200″ />
         </div>
    </div>

 

css dosyasında yazılan style

.container{
    width:100%;
    display:table;

    }

.orta{
    display:table-cell;
    text-align:center;
    width:100%;
    float:left;
    margin:10px;
    }

 

Sonuç olarak objeler sayfaya ortalanmış olarak görünüyor.

örnek sayfaya buradan bakabilirsiniz.