Merhabalar,

Bu yazımda CSS ile bir nesneyi hem yatay hem de dikey olarak nasıl ortalayabileceğimizden ve bunu daha pratik hale getirmek için VS Code üzerinde Snippet (kod parçacığı) tanımlamaktan bahsedeceğim.

Flex yapısı ortalama işlemleri için en doğru ve esnek yöntemdir. Aşağıdaki gibi basit 3 satırlık bir CSS kuralı ile ortalama işlemini gerçekleştirebiliriz:

.kapsayici {
  display: flex;
  justify-content: center; /* Yatay Ortalama */
  align-items: center;     /* Dikey Ortalama */
}

Bu 3 satırlık yapı her projede tekrarlandığı için, bunu kolaylaştırmak adına Visual Studio Code üzerinde Snippet oluşturabiliriz.

Menü yolunu izleyin: File > Preferences > User Snippets ve açılan listeden css.json dosyasını seçin.

Daha sonra süslü parantezler arasına aşağıdaki JSON yapısını ekleyin:

"display:flex ve ortala": {
  "prefix": "dfo",
  "body": [
    "display: flex;",
    "justify-content: center;",
    "align-items: center;"
  ],
  "description": "Nesneleri flex kapsayıcısında ortala"
}

Bu snippet yapısında:

• prefix: Snippet’ı çağırmak için kullanacağınız kısa koddur. Örneğin “dfo”.
• body: Snippet çalıştığında dosyaya yazılacak olan kodlardır.
• description: Snippet’ın ne işe yaradığını açıklamak için kullanılır.

Artık CSS dosyanıza dfo yazıp Tab tuşuna bastığınızda yukarıdaki flex ortalama kodları otomatik olarak yazılır.

Bu yöntemi kullanarak sürekli yazdığınız CSS yapıları için kendi snippet’larınızı oluşturabilir ve yazım hızınızı büyük ölçüde artırabilirsiniz.

Mutlu Kodlamalar :)