Tasarım Kodlama

CSS ile Sayfayı Ortalama

Bu yazıda İlk CSS örneklerinden bir tanesi olan sayfayı tarayıcının ortasına getirmeyi göstereceğiz.

Sitemizde bulunan diğer CSS Örnekleri için buradaki bağlantıyı kullanabilirsiniz.

Bu yazıda <body> etiketi içinde tanımladığımız <div class=”container”> adında bir etiketi nasıl ortalayacağınızı göreceksiniz. İlk olarak aşağıdaki gibi HTML etiketlerini oluşturuyoruz.

HTML çıktısı tarayıcıda şu şekilde olacaktır.

Div etiketini Ortalama

Ortalanacak div’e öncelikle olarak sabit bir genişlik vermemiz gerekiyor. Ardından margin (dış boşluk) özelliğini kullanarak soldan ve sağdan otomatik boşluk vereceğiz. Bu işlemi yapan CSS kodları şu şekildedir.

Yukarıdaki kod çalıştırıldığında aşağıdaki gibi sayfayı ortalamış olacağız.

CSS Media Query Kullanarak Ortalama

Yukarıdaki örnek en basit şekli ile bir ortalama nasıl yapıldığını göstermektedir. Ancak çeşitli genişlikteki cihazlar için ortalama margin:auto; ile yapılabilir ama genişlik için farklı ölçüler kullanılmalıdır.

Aşağıdaki örnekte farklı cihazlarda daha iyi görünüm sağlayan bir ortalama örneği bulunmaktadır.

HTML ve CSS kodları:

Yorum yap