Bir div içindeki elemanları CSS kullanarak ortalayabilirsiniz.
Div içindeki elemanları ortalamak için postion, table gibi display özellikleri yanı sıra 2017den beri güncel olarak kullanılan flex özelliğini kullanarak rahatlıkla öğleri bir div içinde ortaya yerleştirebilirsiniz. Flex nesneleri için detaylı bilgi için flexbox kullanımı yazısını okuyabilirsiniz.
Aşağıdaki gibi bir HTML dosyasını adım adım kodlayarak div içindeki elemanları ortaya yerleştirelim.
Kapsayıcıyı flex yapma
1 2 3 4 5 6 7 | <div class="kapsam"> <div class="kutu">A</div> <div class="kutu">B</div> <div class="kutu">C</div> </div> |
Yukarıdaki HTML dosyasında .kapsam nesnesinin CSS kodunu aşağıdaki gibi yaparak kapsamın bir flex nesnesi olmasını sağlıyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .kapsam{ display: flex; height: 300px; width: 600px; background-color: #636e72; } .kutu{ width: 100px; height: 100px; font-size: 30px; margin:10px; padding:20px; text-align: center; background-color: #0984e3; color:#fff; } |
Şimdi .kapsam divini aşağıdaki yatayda ortalamak için justify-content: center; özelliğini veriyoruz.
Ardından yatayda ortalama için align-items: center; özelliğini veriyoruz.
Bir nesneyi ortalamak için kapsam divine
display: flex;
justify-content: center;
align-items: center;
mutlaka verilmesi gerekir.
Kodları tekrardan yazacak olursak HTML ve CSS kodları aşağıdaki gibi olacaktır.
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 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <style> .kapsam{ display: flex; justify-content: center; align-items: center; height: 300px; width: 600px; background-color: #636e72; } .kutu{ width: 100px; height: 100px; font-size: 30px; margin:10px; padding:20px; text-align: center; background-color: #0984e3; color:#fff; } </style> </head> <body> justify-content: center; align-items: center; <div class="kapsam"> <div class="kutu">A</div> <div class="kutu">B</div> <div class="kutu">C</div> </div> </body> </html> |
Yorum Yap