CSS kullanarak başka bir div’in içinde olan div elementini yatay olarak nasıl ortalayabilirim?
<div id="dis">
<div id="ic">Foo foo</div>
</div>
Birkaç yolu var.
Aşağıdaki CSS’i iç div’e uygulayın:
#ic {
width: 50%;
margin: 0 auto;
}
Tabii ki, width değerini 50% yapmak zorunda değilsiniz. Dış div’den daha az herhangi bir genişlik çalışacaktır. Zaten asıl işi margin: 0 auto
ile yapıyoruz.
Internet Explorer 8’i de hedefliyorsanız, bunun yerine aşağıdakini kullanmak daha iyi olabilir:
#ic {
display: table;
margin: 0 auto;
}
İç eleman merkezini yatay olarak ortalayacak ve width için belirli bir ayar yapmadan da çalışacaktır.
Aşağıdaki örneği deneyebilirsiniz:
#ic {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#dis {
border: 1px solid red;
width:100%
}
<div id="dis">
<div id="ic">Foo foo</div>
</div>
flexbox
kullanarak yatay ve dikey ortalamak da çok kolaydır:
#ic {
border: 1px solid black;
}
#dis {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
<div id="dis">
<div id="ic">Foo foo</div>
</div>
Div’i dikey olarak ortalamak için align-items: center
özelliğini kullanın.
CSS 3 için en iyi yaklaşım
Kutu modeli:
#dis {
width: 100%;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
#ic {
width: 50%;
}
<div id="dis">
<div id="ic">Foo foo</div>
</div>
Kullanım amacınıza göre box-orient, box-flex, box-direction
özelliklerini de kullanabilirsiniz.
Aşağıdaki bağlantılardan öğeleri ortalama hakkında daha fazla bilgi edinebilirsiniz:
Aşağıdaki yazı ise kutu modelinin neden en iyi yaklaşım olduğunu açıklar: