Merhabalar,
Css ile bir nesneyi dikey ve yatay ortalamak, kapsayıcının yüksekliği ve genişliği ne olursa olsun en doğru ölçüde ortalamak için kapsayıcıya display:flex vermemiz her zaman en doğru seçim olmuştur.
Tabii ki flex özelliği sadece ortalamak için kullanılmıyor. Bunun yanında nesneyi dikey ve yatay ortalamak için flex ile kullanabileceğimiz 2 özellik daha bulunuyor. Aşağıda hemen belirteyim.
.kapsayici {
display: flex;
justify-content: center; /* Yatay Ortalama */
align-items: center; /* Dikey Ortalama */
} Evet yukarıdaki özellikleri kapsayıcı elemente verdiğinizde içindeki elemanları dikey ve yatay olarak ortalı bir şekilde hizalar.
Baştan bir tasarım kodladığınızda ortalanacak bölüm çok olduğundan bu 3 satırı sürekli tekrarlamak yerine Visual Studio Code üzerinde Snippet (Kod Parçacığı) oluşturarak daha hızlı yazabilmemiz mümkün.
Zaten 3 satır bir şey neden snippet kullanayım demeyin kolay bir şekilde oluşturmak sürekli tekrarlandığında size zaman kazandıracaktır ayrıca snippet oluşturma mantığını kavradığınızda kendinize özel sürekli kullandığınız kod parçalarını da ekleyip daha pratik bir şekilde onları kullanabileceksiniz.
Nasıl oluşturacağımıza hemen göz atalım;
Üst Menü > File (Dosya) > Preferences (Tercihler) > User Snippets (Kullanıcı Parçacıkları)
Daha rahat anlamak ve ulaşmak isterseniz VS Code Türkçe kullanımı için yazımı inceleyebilirsiniz.
Bağlantısına tıklayın size bir pencere açılacaktır oradan Css.json dosyasını seçin. Örnek kodlar bulunur siz süslü parantezler içine bir satır açıp aşağıda verdiğim kodu yapıştırın. Süslü parantez içinde olduğunuza emin olun.
"display:flex ve ortala": {
"prefix": "dfo",
"body": [
"display: flex;",
"justify-content: center;",
"align-items: center;"
],
"description": "Nesneleri flex kapsayıcısında ortala"
} Yukarıdaki json yapısı snippet olarak css dosyalarına tanıtmamız işine yarıyor. Başlığımı yazdık içindeki anahtar (key) açıklamalarını kısaca yapayım;
- prefix: İçine yazılan değeri Css dosyasında bu kod parçasını çağırması amacıyla yazılır. Örneğin biz “dfo” yazıp Tab tuşuna bastığımızda flex ile ortalama için yazdığımız snippet çalışacaktır.
- body: İçine yazılan değer snippet çalıştığında Css dosyasına yazılan metin olmaktadır. Yukarıda belirttiğim 3 satırı body içine yazdım ve “dfo” yazıp Tab tuşuna bastığımda bu 3 satır otomatik olarak yazılmış olacaktir.
- description: ise sadece yazdığımız Snippet öğesinin açıklamasıdır. Ne işe yaradığını tekrardan dönüp baktığınızda hatırlamanız için bu alanı doldurabilirsiniz.
Açıkladığım key’ler dışında (prefix, body, description) tırnak içindeki değerleri kendinize göre özelleştirebilirsiniz. Örneğin dfo değil ort olarak değerini tırnak içinde güncelleyebilirsiniz.
Bir Css dosyası açıp test edebilirsiniz oldukça hoşunuza gidecektir. Sizde kendi Snippet’ larınızı oluşuturun ve keyfini çıkarın.
Mutlu Kodlamalar 🙂
