Mükemmel Merkez

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 48 / 76.

CSS'te, bir öğeyi üst öğesinin içinde hem yatay hem de dikey olarak ortalamak anlamına gelen “mükemmel merkezleme”, yaygın bir düzen sorunudur. Flexbox, bu soruna zarif ve basit bir çözüm sunar. justify-content ve align-items özelliklerini birleştirerek, alt öğenin veya üst öğenin boyutundan bağımsız olarak bir alt öğeyi esnek kapsayıcısının içinde kolayca ortalayabilirsin.

Flexbox kullanarak tam ortalamayı şöyle yapabilirsin:

.container {
    display: flex; /* Üst öğeyi bir flex kapsayıcısına dönüştür */
    justify-content: center; /* Alt öğeyi ana eksen boyunca yatay olarak ortala */
    align-items: center; /* Alt öğeyi çapraz eksen boyunca dikey olarak ortala */
}

Bu tekniğin etkili bir şekilde çalışması için flex kapsayıcısının tanımlanmış bir yüksekliği olduğundan emin ol. Kapsayıcının yüksekliği açıkça ayarlanmazsa, yalnızca içeriği kadar yüksek olur ve dikey ortalama belirgin olmayabilir.

Bu tekniğin HTML'de nasıl kullanılacağına dair bir örnek:

<div class="container">
    <div class="child">This is centered</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Kapsayıcı için belirli bir yükseklik ayarla */
    border: 1px solid black; /* İsteğe bağlı: Görselleştirme için kenarlık ekle */
}

.child {
    padding: 20px;
    border: 1px solid red;
}

Bu örnekte, .container öğesinin yüksekliği 300px değerindedir ve .child öğesi içinde hem yatay hem de dikey olarak tam ortalanır.

Görev

Kolay

Sana, bir çocuk bölümü (<div>) içeren bir üst bölüm (<div>) bulunan bir HTML belgesi veriliyor. Görevin, Flexbox kullanarak çocuk bölümü üst bölümün içinde tam olarak ortalamaktır. Aşağıdaki adımları izle:

parent sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yaz.
Öğeyi bir esnek kapsayıcıya dönüştürmek için .parent öğesinin display özelliğini flex olarak ayarla.
Çocuk bölümü yatay olarak ortalamak için .parent öğesinin justify-content özelliğini center olarak ayarla.
Çocuk bölümü dikey olarak ortalamak için .parent öğesinin align-items özelliğini center olarak ayarla.
Dikey ortalamanın görünür olmasını sağlamak için .parent öğesine 200px yüksekliği ver.

Kendin dene

<html>
<head>
    <title>The Perfect Center</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">Center Me</div>
    </div>
</body>
</html>