CSS ile HTML Nesnelerini Yatay ve Dikey Ortalama

sdkbyrm · 23 Aralık 2020

HTML nesnelerini yatay ortalama yapmak kolay olmasına rağmen dikeyde ortalama için çok farklı yöntemler denemek gerekir. Bunlardan en bilinen örnek position durumları ile oynamaktır. Ancak bu videoda vh ve vw değerleri ile table-cell görünümü kullanarak bir div nesnesini ekranda ortalama işlemini yapacağız.

Ortalama yapmak için ister 2:40 dakikalık videoyu izlersiniz isterseniz izde aşağıdaki kodları bir editöre yazıp sonucu gözlemleyebilirsiniz.

HTML yatay ve dikey ortalama kodları:

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Yazılım Kodlama</title>
<style>
/*
CSS ile nesneyi ortalamanın birden fazla yöntemi mevcut
Ancak bu yöntem benim için daha sadece...
*/
body{
display: table-cell;
text-align: center;
vertical-align: middle;
height: 100vh;/*ekran yüksekliğinin tamamı*/
width: 100vw;/*ekran genişliğinin tamamı*/
}
h1{
font-family: sans-serif;
font-size: 2em;
}
div{
display: inline-block;
background: #ff7675;
color:#ecf0f1;
padding:20px;
}

</style>
</head>
<body>
<div>
<h1>Yazılım<br>Kodlama</h1>
</div>
</body>
</html>

CSS ile HTML Nesnelerini Yatay ve Dikey Ortalama

sdkbyrm