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]
}
Şimdi
.kapsam divini aşağıdaki yatayda ortalamak için
justify-content: center; özelliğini veriyoruz.
Ardından yatayda ortalama için
align-items: center; özelliğini veriyoruz.
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. Üye Olmak için TIKLAYIN...]