Kategoriler
Kodlama

Bir div’i ortalamanın tüm yolları

CSS ile bir div’i ortalamak için tüm yöntemler.

Bir div’i veya herhangi bir(display:block; olan) elemanı yatay ve dikey olarak ortalamanın tüm yollarını paylaşacağım.

Daha önce paylaşmış olduğum grid yöntemi aslında en kısa ve kullanışlı olan:

CSS ile herhangi bir nesneyi ortalamak: Bu tek satır CSS kodu herhangi bir nesneyi dikeyde ve yatayda kolayca ortalayabilir, artık Google’da aramayı bırakabilirsiniz.

Ancak farklı ihtiyaçlar olabilir ve aşağıdaki yöntemleri de kullanabilirsiniz.

CSS ile ortalama yöntemleri

Grid:

.outer-div {
  display: grid;
  place-content: center;
}

veya

.outer-div {
  display: grid;
  align-items: center;
  justify-content: center;
}

veya

.outer-div {
  display: grid;
}

.inner-div {
  align-self: center;
  justify-self: center;
}

Flexbox:

.outer-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

veya

.outer-div {
  display: flex;
  justify-content: center;
}

.inner-div {
  align-self: center;
}

Absolute pozisyonu ile:

.outer-div {
  position: relative;
}

.inner-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

veya

.outer-div {
  position: relative;
}

.inner-div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

Aşağıdan tümünü deneyebilirsiniz:

wolkanca.com’da Bir div’i ortalamanın tüm yolları veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, Bir div’i ortalamanın tüm yolları için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.