Kusursuz Ortalama

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 48 / 76.

CSS'te, bir öğeyi ebeveyni içinde hem yatay hem de dikey olarak ortalamak anlamına gelen "mükemmel merkez"i elde etmek, yaygın bir düzen zorluğudur. Flexbox, bu soruna zarif ve basit bir çözüm sunar. justify-content ve align-items özelliklerini birleştirerek, alt öğenin veya ebeveynin boyutundan bağımsız olarak bir alt öğeyi flex kapsayıcısı içinde kolayca ortalayabilirsiniz.

Flexbox kullanarak mükemmel ortalamayı şu şekilde sağlayabilirsiniz:

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

Bu tekniğin etkili bir şekilde çalışmasını sağlamak için, flex kapsayıcısının tanımlanmış bir yüksekliğe sahip olduğundan emin olun. Eğer kapsayıcının yüksekliği açıkça ayarlanmamışsa, yalnızca içeriği kadar yüksek olacaktır 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 ayarlayın */
    border: 1px solid black; /* İsteğe bağlı: Görselleştirme için bir kenarlık ekleyin */
}

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

Bu örnekte, .container öğesi 300px yüksekliğe sahiptir ve .child öğesi içinde hem yatay hem de dikey olarak mükemmel bir şekilde ortalanacaktır.

Görev

Kolay

Bir alt bölüm (<div>) içeren bir üst bölüme (<div>) sahip bir HTML belgesi size verilmiştir. Göreviniz, alt bölümü üst bölüm içinde mükemmel bir şekilde ortalamak için Flexbox kullanmaktır. Aşağıdaki adımları izleyin:

parent sınıfına sahip <div> öğesini hedefleyen bir CSS kuralı yazın.
.parent öğesini bir flex kapsayıcısına dönüştürmek için display özelliğini flex olarak ayarlayın.
Alt öğeyi yatay olarak ortalamak için .parent öğesinin justify-content özelliğini center olarak ayarlayın.
Alt öğeyi dikey olarak ortalamak için .parent öğesinin align-items özelliğini center olarak ayarlayın.
Dikey ortalamanın görünür olduğundan emin olmak için .parent öğesine 200px değerinde bir height verin.

Kopya kağıdı

Bir öğeyi Flexbox kullanarak hem yatay hem de dikey olarak mükemmel bir şekilde ortalamak için justify-content: center ve align-items: center özelliklerini birleştirin:

.container {
    display: flex;
    justify-content: center; /* Yatay olarak ortala */
    align-items: center; /* Dikey olarak ortala */
    height: 300px; /* Görünür dikey ortalama için yükseklik tanımlayın */
}

Dikey ortalamanın belirgin olması için flex kapsayıcısının tanımlanmış bir yüksekliği olmalıdır.

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>