CSS align-items Örnek

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> #anakutu { width: 220px; height: 350px; border: 2px solid black; display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center; } #anakutu div { -webkit-flex: 1; flex: 1; color:white; font-weight:bold; } </style> </head> <body> <div id="anakutu"> <div style="background-color:red;">Kutu</div> <div style="background-color:green;">Kutu</div> <div style="background-color:blue;">Kutu</div> <div style="background-color:gray;">Kutu</div> <div style="background-color:black;">Kutu</div> <div style="background-color:pink;">Kutu</div> </div> <article><b>Hatırlatma:</b> Internet Explorer 10 ve önceki versiyonlar align-items özelliğini desteklemiyor.</article> <article><b>Hatırlatma:</b> Safari 7.0 ve sonrasındaki sürümleri -webkit-align-items özelliğini destekliyor.Tüm tarayıcılar bu komutu standart kabul edene kadar -webkit ön takısı kullanılmalıdır.</article> </body> </html>

Yorumlar

Popüler yayınlar

HTML Metin Biçimlendirme Etiketleri

HTML em Etiketi

HTML hr Etiketi

CSS justify-content Özelliği

HTML table Etiketi

CSS align-items özelliği

HTML pre Etiketi

CSS flex-basis Özelliği

HTML menu Etiketi

CSS content Özelliği