CSS Düzen - Yatay ve Dikey Hizalama

Element merkeze alınmış

Yatay ve dikey olarak merkeze alınmış elementler

Elementi merkeze al

Blok elementlerini (örneğin <div>) yatay olarak merkeze almak için margin: auto;.

Bir elementin genişliğini ayarlamak, bunun konteynerin kenarlarına uzanmasını önler.

Ardından, element belirtilen genişliği kaplayacak ve kalan alan iki dış boşluk arasında eşit olarak dağıtılacaktır:

Bu div elementi merkeze alınmış.

Örnek

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 20px;
}

Kişisel olarak deneyin

Dikkat:Ayarlanmamışsa width öznitelik (veya bunu 100% olarak ayarlayın) ise merkeze alma geçersizdir.

Metni merkeze al

Sadece bir eleman içinde metni merkeze almak istiyorsanız, text-align: center;:

Bu metin merkeze alınmış.

Örnek

.center {
  text-align: center;
  border: 3px solid green;
}

Kişisel olarak deneyin

İpucu:Metni nasıl hizalayacağınızla ilgili daha fazla örnek için bkz. CSS Metin Bu bölüm.

Görseli merkeze al

Görsel merkeze almak için, sağ ve sol dış boşlukları ayarlayın autove bunu blok elemanı olarak ayarlayın:}

Örnek

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Kişisel olarak deneyin

sol ve sağ hizalama - position kullanarak

Elemanları hizalamak için bir yöntem position: absolute; :

Bu div sağa hizalıdır.

Örnek

.right {
  position: absolute;
  sol: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

Kişisel olarak deneyin

Dikkat:sabit konumlandırma elemanları normal akımdan çıkarılır ve elemanların birbirine çarpma olasılığı olabilir.

sol ve sağ hizalama - float kullanarak

elemanları hizalamak için başka bir yöntem float Özellikler:

Örnek

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Kişisel olarak deneyin

Dikkat:Bir eleman, içeren elemanından daha yüksekse ve yüzense, konteynerinin dışına taşabilir. Bu durumu çözmek için clearfix hack ekleyebiliriz (aşağıdaki örneği görmek için bakın).

clearfix Hack

Sonra içerik elemanına overflow: auto;bu sorunu çözmek için:

Örnek

.clearfix {
  overflow: auto;
}

Kişisel olarak deneyin

dikey hizalama - padding kullanarak

CSS'te elemanları dikey olarak hizalamak için birçok yöntem vardır. Basit bir çözüm, yukarıdaki yatay ve dikey iç kenar boşluklarını kullanmaktır:

Ben dikey olarak hizalıyorum.

Örnek

.center {
  padding: 70px 0;
  border: 3px solid green;
}

Kişisel olarak deneyin

Yatay ve dikey olarak aynı anda hizalamak istiyorsanız padding ve text-align: center;:

Ben yatay ve dikey olarak ortadayım.

Örnek

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

Kişisel olarak deneyin

dikey hizalama - line-height kullanarak

bir başka teknikeşittirdeğerine height Özellik değerinin line-height Özellikler:

Ben yatay ve dikey olarak ortadayım.

Örnek

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* Eğer çok satırlı metin varsa, aşağıdaki kodu ekleyin: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Kişisel olarak deneyin

dikey hizalama - position ve transform kullanarak

Seçiminiz padding ve line-heightise, başka bir çözüm kullanmak position ve transform Özellikler:

Ben yatay ve dikey olarak ortadayım.

Örnek

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  sol: 50%;
  transform: translate(-50%, -50%);
}

Kişisel olarak deneyin

İpucu:Sizin 2D Dönüşüm Bu bölümde transform özelliği hakkında daha fazla bilgi öğreneceksiniz.

Dikey hizalama - Flexbox kullanarak

İçeriği ortalamak için flexbox kullanabilirsiniz. Lütfen dikkat edin, IE10 ve daha eski sürümler flexbox'u desteklememektedir:

Ben yatay ve dikey olarak ortadayım.

Örnek

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}

Kişisel olarak deneyin

İpucu:Sizin CSS Flexbox Bu bölümde Flexbox hakkında daha fazla bilgi öğreneceksiniz.