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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <style> </style> <html> <body> <div class="container"> <h1>TASARIMKODLAMA</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quia quaerat aperiam laboriosam, itaque voluptatibus eligendi eius suscipit dolores harum distinctio excepturi earum soluta voluptates, dolorem pariatur, labore omnis voluptatum!</p> <p>Voluptatibus nostrum blanditiis eveniet iure veritatis quos impedit aperiam perspiciatis. Fugiat rem maiores facere aperiam fuga perspiciatis suscipit nesciunt assumenda ex, eum repellendus impedit, minus nam tempore itaque dolores? Sit.</p> </div> </body> </html> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <style> .container{ width: 500px; /*ortalanacak div genişliği*/ margin:0 auto; /*alt-üst(0) sağ-sol(auto) boşluk olacak*/ border:1px solid red; /*çerçeve*/ } </style> <html> <body> <div class="container"> <h1>TASARIMKODLAMA</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quia quaerat aperiam laboriosam, itaque voluptatibus eligendi eius suscipit dolores harum distinctio excepturi earum soluta voluptates, dolorem pariatur, labore omnis voluptatum!</p> <p>Voluptatibus nostrum blanditiis eveniet iure veritatis quos impedit aperiam perspiciatis. Fugiat rem maiores facere aperiam fuga perspiciatis suscipit nesciunt assumenda ex, eum repellendus impedit, minus nam tempore itaque dolores? Sit.</p> </div> </body> </html> |
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ı:
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html> <style> .container{ margin:0 auto; /*alt-üst(0) sağ-sol(auto) boşluk olacak*/ border:1px solid red; /*çerçeve*/ } /* Küçük Cihazlar */ @media (min-width: 576px) { .container{ width: 90%; } } /* Orta Cihazlar */ @media (min-width: 768px) { .container{ width: 750px; } } /* Büyük Cihazlar */ @media (min-width: 992px) { .container{ width: 900px; } } /* Çok büyük Cihazlar */ @media (min-width: 1200px) { .container{ width: 1180px; } } </style> <html> <body> <div class="container"> <h1>TASARIMKODLAMA</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quia quaerat aperiam laboriosam, itaque voluptatibus eligendi eius suscipit dolores harum distinctio excepturi earum soluta voluptates, dolorem pariatur, labore omnis voluptatum!</p> <p>Voluptatibus nostrum blanditiis eveniet iure veritatis quos impedit aperiam perspiciatis. Fugiat rem maiores facere aperiam fuga perspiciatis suscipit nesciunt assumenda ex, eum repellendus impedit, minus nam tempore itaque dolores? Sit.</p> </div> </body> </html> |
Yorum Yap