AnasayfaCssCss Text Hizalama Nasıl Yapılır ?
42

Css Text Hizalama Nasıl Yapılır ?

nhtctn nhtctn
13 Haziran 2020 Css

Yazılarımızı hizalamak için kullanmamız gereken özelliğimiz text-align ‘dır.

Aldığı değerler aşağıdaki gibidir.

text-align:left; Sola hizalamak için kullanılır.

text-align:center; Ortaya hizalamak için kullanılır.

text-align:right; Sağa hizalamak için kullanılır.

text-align:justify; Sağa ve sola hizalamak için kullanılır.

<p id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis iure ratione explicabo, laudantium optio repellendus veniam quaerat dolorum excepturi quod!</p>
    <p id="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis iure ratione explicabo, laudantium optio repellendus veniam quaerat dolorum excepturi quod!</p>
    <p id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis iure ratione explicabo, laudantium optio repellendus veniam quaerat dolorum excepturi quod!</p>
    <p id="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis iure ratione explicabo, laudantium optio repellendus veniam quaerat dolorum excepturi quod!</p>
      p {
            border: 1px solid green;
        }

        #left {
            text-align: left;
        }

        #center {
            text-align: center;
        }

        #right {
            text-align: right;
        }

        #justify {
            text-align: justify;
        }

İnline Etiketlerde Hizalama

İnline etiketlerde hizama özelliğiniz kullanamıyoruz.Kullanmak istediğimiz vakitte display:block yaparak hizalama işlemini yapabiliriz.

Bildiğiz üzere a etiketi bir inline etiket olduğu için display:block yapmayana kadar hizalama işlemi olmayacaktır.Aşağıda olduğu gibi block yapınca ortaya hizalamış olduk.

   <a href="#">Anasayfa</a>
   <a href="#">Hakkımızda</a>
   <a href="#">İletişim</a>
       a{
            text-decoration: none;
            display: block;
            text-align: center;
            
        }

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.

Yorum yazın

BENZER YAZILAR