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
Yorum Gönder