Tasarım Kodlama

Div İçindeki Elemanları Ortalama

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

Yukarıdaki HTML dosyasında .kapsam nesnesinin CSS kodunu aşağıdaki gibi yaparak kapsamın bir flex nesnesi olmasını sağlıyoruz.

Ş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.

Yorum yap