Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Hizlama Seçenekleri konusunu öğreneceğiz.
Etiketler Nasıl Ortalanır ?
Bir blok etiketini (div gibi) yatay olarak ortalamak için margin: auto; özelliği kullanılır.Etiketin genişliğini ayarlamak, kapsayıcının kenarlarına kadar uzanmasını önleyecektir.Etiket daha sonra belirtilen genişliği kaplar ve kalan alan iki kenar boşluğu arasında eşit olarak bölünür:
.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }
Not: Genişlik özelliği ayarlanmamışsa (veya% 100'e ayarlanmışsa) ortaya hizalamanın hiçbir etkisi yoktur.
Metni Ortalama Nasıl Yapılır ?
Metni bir etiketin içinde ortalamak için text-align: center; kullanılır.
.center { text-align: center; border: 3px solid green; }
Resim Ortalama Nasıl Yapılır ?
Bir resimi ortalamak için, sol ve sağ kenar boşluğunu otomatik olarak ayarlayın ve onu bir blok etiketi haline getirin:
img { display: block; margin-left: auto; margin-right: auto; width: 40%; }
Position Kullanarak Sağa ve Sola Hizalama
Etiketleri hizalamak için position:absolute; özelliği kullanılabilir.
.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; }
Not: Absolute ile konumlandırılmış etiketler normal akıştan çıkarılır ve diğer etiketlerle çakışabilir.
Float Kullanarak Sağa ve Sola Hizalama
Etiketleri hizalamanın başka bir yöntemi de float özelliğini kullanmaktır:
.right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; }
Padding Kullanarak Dikey Ortalama
CSS'de bir etiketi dikey olarak ortalamanın birçok yolu vardır. Padding kullanarak bu mümkündür ;
.center { padding: 70px 0; border: 3px solid green; text-align: center; }
Line-height Kullanarak Dikey Ortalama
Başka bir püf nokta ise line-height özelliğini height özelliğine eşit bir değerle kullanmaktır:
.center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } .center p { line-height: 1.5; display: inline-block; vertical-align: middle; }