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 olan "mükemmel ortalama", yaygın bir düzen sorunudur. Flexbox bu soruna zarif ve anlaşılır 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 flex kapsayıcısının içinde kolayca ortalayabilirsiniz.

Flexbox kullanarak mükemmel merkezlemeyi şu şekilde gerçekleştirebilirsin:

.container {
    display: flex; /* Turn the parent into a flex container */
    justify-content: center; /* Center the child horizontally along the main axis */
    align-items: center; /* Center the child vertically along the cross axis */
}

Bu tekniğin etkili bir şekilde çalışmasını sağlamak için flex kapsayıcının tanımlanmış bir yüksekliğe sahip olduğundan emin olun. 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; /* Set a specific height for the container */
    border: 1px solid black; /* Optional: Add a border for visualization */
}

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

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

Görev

Kolay

Size, bir alt bölme (<div>) içeren bir üst bölmeye (<div>) sahip bir HTML belgesi verilmiştir. Göreviniz, alt bölmeyi üst bölmenin içinde mükemmel ş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.
Esnek bir kapsayıcıya dönüştürmek için .parent öğesinin 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 olmasını sağlamak için .parent öğesine 200px değerinde bir height verin.

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>