Bazı durumlarda yazıları bulundukları alanlarda yatay ve dikey olarak ortalama ihtiyacımız olur. Bu kaynak detaylı bir şekilde yazıyı bulunduğu alanda yatay ve dikey olarak ortalamayı gösterecektir. Ayrıca sayfanın ortasında da nasıl getireceğiniz konusunda küçük örnekler içerecektir.
Bu yazının sonunda da BODY içinde nesneyi ortalamayı göstereceğiz. İster ortaladığınız bir yazı isterse de bir resim olsun sayfanın ortasında getirmek için yapılması gereken yöntemler aynı olacaktır.
HTML ile Yazıyı yatayda ortalama
Yazıyı (resim de olabilir) yatayda ortalamak için CSS’de text-align: center; özelliği ve değeri kullanılır. Ancak burada dikkat edilmesi gereken nokta CSS kodunun uygulandığı nesnenin blok elemen olmasıdır.
Örnek 1: H1 etiketini ortalama
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="tr"> <head> <style> h1{ text-align: center; border:solid 1px red; } </style> </head> <body> <h1>Tasarım Kodlama</h1> </body> </html> |
Yukarıdaki örnekte gördüğünüz gibi h1 etiketi ortalanmıştır. Ancak H1 etiketinin genişliğinde bir değişiklik olursa bloğun büyüklüğü kadar olan kısımda ortalanacaktır.
HTML ile Yazıyı Dikey Ortalama
HTML ile nesneleri yatayda ortalamak kolay olmasına rağmen dikeyde ortalamak için bir birkaç özelliği bir arada kullanmak zorundayız. Ayrıca birden fazla yöntemi olduğunu da belirtmek isterim.
Örnek: line-height ile yazıyı dikeyde ortalama
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html lang="tr"> <head> <style> h1{ height: 250px; line-height: 250px;/*height kadar*/ text-align: center; /*yatay ortalama*/ border:solid 1px red; } </style> </head> <body> <h1>Tasarım Kodlama</h1> </body> </html> |
Gördüğünüz gibi line-height değerini kutu yüksekliği kadar vererek tek satırlık bir yazıyı bulunduğu alanın ortasında getirebiliriz.
CSS Flex Kullanarak Ortalama
Yukarıdaki yöntemler bir aşamaya kadar kullanılmasına rağmen en geçerli yöntem sanırım grid ve flex kullanmaktır. Şimdi yatayda ve dikeyde ortalama için flex özelliğini nasıl kullanacağımızı görelim. Bu örnekte BODY ve H1 etiketlerine aynı anda CSS kodları yazacağız.
Örnek 1: Flex ile yatay ortalama
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html lang="tr"> <head> <style> body{ display: flex; justify-content: center; } h1{ border:solid 1px red; } </style> </head> <body> <h1>Tasarım Kodlama</h1> </body> </html> |
Gördüğünüz gibi body flex yapılarak içindeki nesnenin ortalanması sağlandı.
Yazıyı yada Resmi Sayfanın Ortasına Yerleştirme
Bu örnekte body etiketi flex yapıldı ve yatayda ve dikeyde ortalamak için aşağdaki gibi CSS kodları yazıldı.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html lang="tr"> <head> <style> body{ margin:0; display: flex; justify-content: center; /*yatay ortalama*/ height: 100vh;/*ekran yüksekliği kadar uzat*/ align-items: center;/*bulunduğu alan içinde dikey ortalama*/ } h1{ border:solid 1px red; } </style> </head> <body> <h1>Tasarım Kodlama</h1> </body> </html> |
Yorum Yap