HTML - CSS: Div Merkezi Ortalama Nasıl Yapılır? 4 Farklı Yol
HTML tasarımlarda bir div elementinin sayfanın ya da içinde bulunduğu alanın tam merkezi konumuna alınması için bir çok yol bulunmakta bunlardan bazıları şöyle.
Öncelikle standart html sayfamızı açıyoruz. ve iki tane alan. Bir "gövde" ikincisi "kutu".
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mhmtalizm!</title>
<style>
.govde{
height: 25rem;
background-color: blueviolet;
}
.kutu{
width: 5rem;
height: 5rem;
background-color:aqua;
}
</style>
</head>
<body>
<div class="govde">
<div class="kutu"></div>
</div>
</body>
</html>
Şimdi merkezi şekilde ortalamak için 1. yöntem Flex
.govde{
display: flex;
justify-content: center;
align-items: center;
}
Ana öğeyi 'display:flex' kullanarak esnek bir alan yapıyoruz. justify-content:center : y ekseninde içindeki öğeyi ortalar. align-items:center öğeyi(kutu) x ekseninde ortalar.
Sonuç
2. yöntem grid
.govde{
display: grid;
place-content: center;
}
Ana öğeyi 'display:grid' kullanarak bir ızgara kapsayıcı yaptık. place-items:center ile birlikte x ve y ekseninde ortaladık.
3. yöntem position
.govde{
position: relative;
}
.kutu{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
`position:relative` kullanarak ana öğeyi(gövde) göreceli olarak konumlandırdık.
`position:absolute` kullanarak alt öğeyi(kutu) mutlak olarak konumlandırdık.
Alt öğe(kutu) için konum değerleri uyguladık.
`position:absolute` kullanarak alt öğeyi(kutu) mutlak olarak konumlandırdık.
Alt öğe(kutu) için konum değerleri uyguladık.
4. yöntem margin
.govde{
display: flex;
}
.kutu{
margin: auto;
}
Ana öğeyi(gövde) 'display:flex' kullanarak esnek kapsayıcı yapın.
`margin:auto` kullanarak alt öğenin(kutu) kenar boşluğunu otomatik yapın.
