CSS kullanarak yaptığımız tasarımlarda dikey ve yatay ortalama sık sık karşımıza problem olarak çıkabilmektedir. Özellikle dikey ortalama eskiden çok uğraştırırdı. Tabii ki hepsinin yine kodu bulunurdu; ancak tasarımdan tasarıma kodu ayarlamak gerekirdi veya CSS eksikliği ile becermek de zor olurdu.
Günümüzde CSS ile artık dikey ve yatay ortalama daha basit hâl aldı. Yine de tasarımlarda ekstra işlemler gerekebilir. Sonuçta paylaşılan kodlar standart diye tabi edebileceğimiz en sade hâliyle gösteriliyor.
CSS ile yatay ve dikey ortalama için 2 farklı yöntem gösterelim.
Div içindeki divi ortalamak isteyelim. Yatay ortalama için ana dive;
|
1 |
text-align:center |
vermek yeterli. Dikey ortalama için ise ana dive;
|
1 |
display:table |
ve içindeki dive;
|
1 2 |
display:table-cell; vertical-align:middle; |
stil kodlarını ekliyoruz. Böylece iki div tablo ve tablo hücresi gibi tanıtılarak dikey ortalama olarak da ortasını seçiyoruz. Böylece içteki div tam ortada.
Demo: http://jsfiddle.net/burakcanga/SK48T/
2. yöntem de ise CSS3 daha açık kullanılmış. Sadece ana dive şu stilleri atamak yeterli.
|
1 2 3 |
display:flex; // Ortalama için gerekli stil align-items:center; // Dikey ortalama justify-content:center; // Yatay ortalama |
Bu şekilde içteki içerik her zaman ortada kalacaktır.
Demo: https://jsfiddle.net/mjgjj85v/2/
