Tiesto

Tiesto

WFN Üye
Konular
635
Mesajlar
635
Çözüm
0
Ticaret Puanı
0
Üyelik
24 Gün
Konum
Antalya
Web Sitesi
Var
Alanı
Domain Uzmanı
1/1
Konu sahibi
İçeriği hem yatay hem dikey olarak ortalamak için öğenin kapsayıcısına display: flex, justify-content: center ve align-items: center tanımlayın. Dikey hizalamanın görünür olması için kapsayıcının bir yüksekliği veya min-height değeri bulunmalıdır; aksi durumda ortalanacak kullanılabilir dikey alan oluşmaz.

Yatay ve dikey ortalama​


Aşağıdaki örnekte .kapsayici içindeki .oge hem yatayda hem dikeyde ortalanır:

CSS: 
.kapsayici {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.oge {
    width: 180px;
    padding: 20px;
    background-color: #e8f0fe;
    text-align: center;
}

justify-content ana eksendeki hizalamayı belirler. Varsayılan flex-direction: row değerinde ana eksen yataydır; bu nedenle justify-content: center öğeyi yatayda ortalar. align-items: center ise çapraz eksendeki, yani dikey hizalamayı kontrol eder.

Bu kodu bir HTML öğesinin stiline uyguladığınızda, kapsayıcının genişliği boyunca öğenin solunda ve sağında eşit boşluk oluşur. min-height: 300px değeri nedeniyle kapsayıcı en az 300 piksel yüksek olur ve öğe bu alanın ortasına yerleşir. Kapsayıcının yüksekliği yalnızca öğenin kendi yüksekliği kadar olsaydı, dikey ortalama fark edilir bir sonuç üretmezdi.

Yalnızca tek yönde ortalama​


Öğeyi yalnızca yatayda ortalamak istiyorsanız justify-content: center yeterlidir:

CSS: 
.kapsayici {
    display: flex;
    justify-content: center;
}

Yalnızca dikeyde ortalamak için ise kapsayıcının ana eksen yönüne dikkat etmeniz gerekir. Varsayılan satır düzeninde dikey hizalama align-items: center ile yapılır:

CSS: 
.kapsayici {
    display: flex;
    align-items: center;
    min-height: 200px;
}

Kapsayıcıya flex-direction: column verirseniz eksenler değişir. Bu durumda ana eksen dikey olur ve dikey ortalama için justify-content: center kullanılır:

CSS: 
.kapsayici {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 300px;
}

Yani hangi özelliğin kullanılacağı, öğelerin satırda mı yoksa sütunda mı dizildiğine bağlıdır. row düzeninde justify-content yatay, align-items dikey ekseni; column düzeninde ise bunun tersi kontrol eder.

Tam ekran ortalama​


Bir yükleme ekranı, karşılama alanı veya modal içeriğini tarayıcı penceresinin ortasına yerleştirmek için kapsayıcıya görünüm yüksekliği verebilirsiniz:

CSS: 
body {
    margin: 0;
}

.sayfa {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icerik {
    padding: 24px;
    background-color: #f2f2f2;
}

100vh, kapsayıcının görünüm alanının yüksekliği kadar olmasını sağlar. body üzerindeki margin: 0 tanımı ise tarayıcının varsayılan dış boşluğunun ortalamayı görsel olarak kaydırmasını önler. İçerik ekran yüksekliğinden uzun olabilecekse sabit height: 100vh yerine min-height: 100vh kullanmak daha uygundur; böylece içerik gerektiğinde büyüyebilir.

Birden fazla öğeyi ortalama​


Flexbox, kapsayıcının doğrudan çocuklarının tamamını birlikte hizalar. Örneğin bir başlık ve düğmeyi aynı bölgede ortalamak için:

HTML: 
<div class="kapsayici">
    <div class="kart">
        <h2>Başlık</h2>
        <p>Açıklama metni</p>
        <button>Devam et</button>
    </div>
</div>

CSS: 
.kapsayici {
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kart {
    text-align: center;
}

Burada ortalanan doğrudan çocuk .kart öğesidir. Kartın içindeki başlık, paragraf ve düğme kendi normal akışında kalır; bunları ayrıca dikey olarak alt alta düzenlemek isterseniz karta display: flex ve flex-direction: column verebilirsiniz.

CSS: 
.kart {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

Bu ek tanım, kartın içindeki öğeleri sütun halinde düzenler ve yatayda kartın ortasına hizalar. justify-content eklemediğiniz için kart içindeki dikey dağılım varsayılan olarak başlangıçtan devam eder.

Ortalanmıyorsa kontrol edilmesi gerekenler​


Öğe yalnız yatayda ortalanıyorsa kapsayıcıda align-items: center bulunup bulunmadığını ve kapsayıcının gerçekten bir yüksekliğe sahip olup olmadığını kontrol edin. Dikey ortalama, yalnızca öğenin içinde hareket edebileceği fazladan alan varsa görünür.

justify-content veya align-items etkisiz görünüyorsa bu özelliklerin Flexbox kapsayıcısına değil, ortalanacak öğeye yazılmadığından emin olun. display: flex tanımı da aynı kapsayıcıda bulunmalıdır. Ayrıca flex-direction: column kullanılıyorsa yatay ve dikey eksenlerin yer değiştirdiğini unutmayın.

Bir öğeyi kapsayıcı içindeki diğerlerinden bağımsız olarak hizalamak istediğinizde align-self kullanılabilir:

CSS: 
.kapsayici {
    display: flex;
    align-items: center;
}

.ozel-oge {
    align-self: flex-start;
}

Bu örnekte diğer öğeler ortalanırken .ozel-oge çapraz eksenin başlangıcına alınır. align-self yalnızca ilgili öğenin hizalamasını değiştirir; kapsayıcının genel ana eksen hizalamasını değiştirmez.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)