HTML vs CSS Div Ortalama Nasıl Yapılır?
Web sitesi geliştirirken bir öğeyi sayfanın ortasına konumlandırmak önemlidir ve bunu HTML ve CSS kullanarak kolayca yapabilirsiniz.
HTML ve CSS ile Div Ortalama
Öncelikle, yeşil arka planlı bir kutuyu sayfanıza ekleyerek başlayabilirsiniz:
| HTML Kodu | CSS Kodu |
|---|---|
| <div class=”kutu”></div> | .kutu { background-color: green; } |
Sonrasında, bu yeşil arka planlı kutuyu sayfanın ortasına taşımak için aşağıdaki kodları kullanabilirsiniz:
| HTML Kodu | CSS Kodu |
|---|---|
| <div class=”kutu ortalama”></div> | .kutu ortalama { margin: 0 auto; } |
Ardından, bir div içerisindeki öğeyi yatay ve dikey olarak ortalamanız gerektiğinde şu adımları izleyebilirsiniz:
- Yatay Ortalama: Öğeyi yatay olarak ortalamanız için CSS’de margin: 0 auto; kullanabilirsiniz.
- Dikey Ortalama: Öğeyi dikey olarak ortalamanız için CSS’de display: flex;, justify-content: center; ve align-items: center; özelliklerini kullanabilirsiniz.
Position, margin, display, justify-content ve align-items gibi CSS özellikleri sayesinde öğeleri istediğiniz şekilde sayfanın ortasına konumlandırabilirsiniz.
Web gelişimine ilgi duyuyorsanız, bu konuda daha fazla bilgi edinmek için çeşitli kaynaklardan yararlanabilir ve pratik yaparak kendinizi geliştirebilirsiniz.
0 Yorum