IRCRehberi.Net- Türkiyenin En iyi IRC ve Genel Forum Sitesi

Bir div içindeki elemanları CSS kullanarak ortalayabilirsiniz.

Div içindeki elemanları ortalamak için postion, table gibi display özellikleri yanı sıra 2017'den beri güncel olarak kullanılan flex özelliğini kullanarak rahatlıkla öğeleri bir div içinde ortaya yerleştirebilirsiniz.

Aşağıdaki gibi bir HTML dosyasını adım adım kodlayarak div içindeki elemanları ortaya yerleştirelim.

Kapsayıcıyı flex yapma

PHP- Kodu:

      <div class="kapsam">

        <div class="kutu">A</div>

        <div class="kutu">B</div>

        <div class="kutu">C</div>

    </div>

Yukarıdaki HTML dosyasında .kapsam nesnesinin CSS kodunu aşağıdaki gibi yaparak kapsamın bir flex nesnesi olmasını sağlıyoruz.

PHP- Kodu:

           .kapsam{

            display: flex; 

            height: 300px;

            width: 600px;

            background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=636e72]#636e72[/URL]

        }

        .kutu{

            width: 100px;

            height: 100px;

            font-size: 30px;

            margin:10px;

            padding:20px;

            text-align: center;

            background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=0984e3]#0984e3[/URL]

            color:[URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=fff]#fff[/URL]

        }

[Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]

Şimdi .kapsam divini aşağıdaki yatayda ortalamak için justify-content: center; özelliğini veriyoruz.

[Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]

Ardından yatayda ortalama için align-items: center; özelliğini veriyoruz.

[Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]

Bir nesneyi ortalamak için kapsam divine

display: flex;
justify-content: center;
align-items: center;

mutlaka verilmesi gerekir.

Kodları tekrardan yazacak olursak HTML ve CSS kodları aşağıdaki gibi olacaktır.

PHP- Kodu:

   <!DOCTYPE html>

<html lang="tr">

<head>

    <meta charset="UTF-8">

    <style>

        .kapsam{

            display: flex;

            justify-content: center;

            align-items: center;

            height: 300px;

            width: 600px;

            background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=636e72]#636e72[/URL]

        }

        .kutu{

            width: 100px;

            height: 100px;

            font-size: 30px;

            margin:10px;

            padding:20px;

            text-align: center;

            background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=0984e3]#0984e3[/URL]

            color:[URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=fff]#fff[/URL]

        }

    </style>

</head>

<body>

    justify-content: center;

    align-items: center;

    <div class="kapsam">

        <div class="kutu">A</div>

        <div class="kutu">B</div>

        <div class="kutu">C</div>

    </div>

</body>

</html>

Kaynak : [Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]