css-yatay-ve-dikey-hizalama

Malzemeleri Hizalama Merkezi Hizala
Bir blok öğesini (<div> gibi) yatay olarak ortalamak için margin: auto;
Elemanın genişliğini ayarlamak, konteynırın kenarlarına kadar uzanmasını önleyecektir.
Eleman daha sonra belirtilen genişliği alacak ve kalan alan iki kenar boşluğu arasında eşit olarak bölünecektir:
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Not:width Özellik ayarlı değilse (veya% 100 olarak ayarlanırsa) , merkezi hizalama işleminin hiçbir etkisi yoktur .

Metnin Merkezinde Hizalama
Metni bir öğenin ortasına yerleştirmek için text-align: center;
.center {
text-align: center;
border: 3px solid green;
}

Görüntüyü ortalayın
Bir görüntüyü ortalamak için sol ve sağ kenar boşluklarını autobir blocköğeye ayarlayın ve bir öğe haline getirin :
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}

Sola ve Sağa Hizala - Pozisyonu kullanma
Elemanları hizalamak için bir yöntem kullanmaktır position: absolute;:
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Not: Mutlak konumlandırılmış öğeler normal akıştan kaldırılır ve öğelerin üzerine binebilir.
İpucu: Elemanları hizalarken , öğeyi position daima tanımlayın margin ve öğe için. Bu, farklı tarayıcılarda görsel farklılıklardan kaçınmak içindir. padding <body>
IE8 ve önceki sürümlerinde, kullanırken de bir sorun var position. Bir konteyner öğesi (bizim durumumuzda <div class = "container">) belirtilen genişliğe ve ! ​​DOCTYPE bildirimi eksikse, IE8 ve önceki sürümler sağ tarafa 17 piksel kenar boşluğu ekleyecektir. Bu, bir kaydırma çubuğu için ayrılan alan gibi görünüyor. Yani, kullanırken her zaman! DOCTYPE bildirimini ayarlayın position:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}

Sola ve Sağa Hizala - Float kullanma
Elemanları hizalamak için bir başka yöntem de float mülkiyet kullanmaktır :
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
İpucu: Elemanları hizalarken , öğeyi float daima tanımlayın margin ve öğe için. Bu, farklı tarayıcılarda görsel farklılıklardan kaçınmak içindir. padding <body>
IE8 ve önceki sürümlerinde, kullanırken de bir sorun var float. ! DOCTYPE bildirimi eksikse, IE8 ve önceki sürümler sağ tarafa 17 piksel kenar boşluğu ekleyecektir. Bu, bir kaydırma çubuğu için ayrılan alan gibi görünüyor. Yani, kullanırken her zaman! DOCTYPE bildirimini ayarlayın float:
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}

Dikey Merkezle - Dolguyu kullanma
Bir öğeyi CSS'de dikey olarak ortalamanın birçok yolu vardır. Basit bir çözüm üst ve alt kullanmaktır padding:
.center {
padding: 70px 0;
border: 3px solid green;
}
Dikey ve yatay hem ortalamak için kullanın paddingve text-align: center:
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}

Dikey Merkezleme - Satır yüksekliğini kullanma
Başka bir numara line-height özelliği mülkiyet mülkiyet eşit bir değere kullanmaktır height.
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* Metin birden fazla satır içeriyorsa aşağıdakileri ekleyin: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}

Dikey Merkezleme - Konum ve dönüşümü kullanma
Eğer padding ve line-height bir seçenek değildir, üçüncü çözüm konumlandırma ve kullanmaktır transform özelliğini:
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}