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;
}