CSS ile HTML Nesnelerini Yatay ve Dikey Ortalama

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
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>
 
Üst Alt