Div Nasıl Ortalanır? 5 Farklı Yolla Div Ortalama

Teknokodi
div nasıl ortalanır

Div nasıl ortalanır? En iyi yazılımcıların bile yapamayıp google da arattığı bu ortalama olayı nasıl yapılır? İşte bu yazımızda 5 farklı yolla div ortalamayı göreceğiz. Ayrıca bu yöntemleri başka elemanları ortalamak için de kullanabilirsiniz.

1. Flexbox ile Ortalama

Flexbox, içeriği hem dikey hem de yatay olarak ortalamanın modern bir yoludur:

				
					.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
				
			
				
					<div class="container">
    <div class="centered-div">Teknokodi</div>
</div>

2. Grid İle Ortalama

CSS Grid ile ayrıca içeriği ortalayabilir:

				
					.container {
    display: grid;
    place-items: center;
    height: 100vh;
}
				
			
				
					<div class="container">
    <div class="centered-div">Teknokodit</div>
</div>

3. Mutlak Konumlandırma ile Ortalama

Mutlak konumlandırmayı kullanarak bir div’i ortalayabilirsiniz:

				
					.container {
    position: relative;
    height: 100vh;
}
.centered-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
				
			
				
					<div class="container">
    <div class="centered-div">Teknokodit</div>
</div>

4. Margin Auto İle Ortalama

Basit yatay ortalama için margin auto kullanılabilir:

				
					.centered-div {
    width: 50%;
    margin: 0 auto;
}
				
			
				
					<div class="centered-div">Teknokodi</div>

5. Inline-block display İle Ortalama

Inline ve inline-block ile ortalama:

				
					.container {
    text-align: center;
    line-height: 100vh;
}
.centered-div {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
				
			
				
					<div class="container">
    <div class="centered-div">Teknokodit</div>
</div>

Bu yazımızda bir div nasıl ortalanır bunu gördük. Bu yöntemler ile bir div i yada başka bir elementi ortalayabilirsiniz. 

Paylaş

Takip Et

Twitter Linkedin Instagram Google-play

Eğitimin, Eğlencenin ve Haberin Sitesi TEKNOKODİ

Okunma Sayısı 35

İlgili Yazılar