PHP- Kodu

**ExCaLuBuR** · 14 Temmuz 2021, 18:06

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...]

**She** · 18 Temmuz 2021, 15:10

Emeğinize sağlık

**Sim** · 23 Temmuz 2021, 12:06

emegine saglik

**Artist** · 23 Temmuz 2021, 12:08

Emeğinize sağlık

**Reyhan** · 17 Ağustos 2021, 00:17

Emeğine sağlık

14 Temmuz 2021, 18:06	#1
ExCaLuBuR	Div İçindeki Elemanları Ortalama 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...] ________________ 06/02/2023 İnsan olan herkesin kalbi acıdı. Konu ExCaLuBuR tarafından (13 Mart 2023 Saat 23:07 ) değiştirilmiştir..
	Alıntı Yap

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)