Css Text Hizalama

Html sayfalarımızda yazıları hizalamak için text-align özelliğini kullanırız.

p#first{
  text-align:left;
}

p#second{
  text-align:center;
}

p#third{
  text-align:right;
}

p#fourth{
  text-align:justify;
}

Örneğimizde 3 <p> etiketi için farklı text-align özellikleri kullandık.

text-align:left; => sola hizalanır. 

text-align:center; => ortaya hizalanır. 
text-align:right; => sağa hizalanır. 

text-align:justify; => sağa ve sola hizalanır. 

Örnek 1 için tıklayınız.

Html' de Inline etiketler nasıl hizalanır ?

** hizalama işlemi block etiketlere uygulanır. Eğer inline bir etiketleri için text-align özelliği işlevsel değildir. Eğer ki inline etiket grubunu hizalamak istersek bu durumda inline etiket grubunu bir block etiketi içine alıp hizalama işlemini yapabiliriz.

<div>
  <a href="#"> Link 1 </a>
  <a href="#"> Link 2 </a>
  <a href="#"> Link 3 </a>
</div>

div {
  text-align:right;
}

** inline etiketlere direk hizalama özelliği ekleyememizin sebebi; inline etiketler satırda içerik kadar yer kaplarlar hizalama işlemi için tüm satırı kaplamaları gerekir.

Örnek 2 için tıklayınız.