Merhaba arkadaşlar,

Sayfayı yatay ve dikey ortalamak :

Margin ile yatay ortalamak :

Width değeri olan ve float değeri olmayan nesneleri margin ile ortalarız.
Html :

<div class="marginOrtala">
Margin: 0px auto; 
veya
margin-left:auto; margin-right:auto;
</div>

Margin: 0px auto;

veya

margin-left:auto; margin-right:auto;

</div>

Css:

.marginOrtala {
width: 500px;
margin: 0px auto;
background:green;
height:300px;
}

.marginOrtala {

width: 500px;

margin: 0px auto;

background:green;

height:300px;

}

Örnek :

Position ile yatay ortalamak :

Position ile yatay ve dikey ortalama

Html :

<div class="positionOrtala">
position: absolute;
left:50%;
top:50%;
margin-left: -250px;
margin-top:-150x;
</div>

position: absolute;

left:50%;

top:50%;

margin-left: -250px;

margin-top:-150x;

</div>

Css:

.positionOrtala {
width: 500px;
margin: 0px auto;
background:green;
height:300px;
color:#fff;
position: absolute;
left:50%;
top:50%;
margin-left: -250px;
margin-top:-150px;
}

.positionOrtala {

width: 500px;

margin: 0px auto;

background:green;

height:300px;

color:#fff;

position: absolute;

left:50%;

top:50%;

margin-left: -250px;

margin-top:-150px;

}

Örnek :

Position ile yatay ortalamak :

İçeriği dikey ortalamak

Burada ufak değinmiştim bu olaya. En dış div’e display:table; ve bir içindekine display:table-cell; verdiğimizde (*iki elementede float verilmemelidir) 2. div’in içindeki içeriği vertical-align:middle; ile ortalayabiliriz.

Html :

<div class="cerceve">
<div class="icerik">
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.
</div><!-- icerik kapanis -->
</div><!-- cerceve kapanis -->

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.

</div>

</div>

Css:

.cerceve {
width: 500px;
background: #f3f3f3;
height: 450px;
display: table;
margin: 0px auto;
}

.icerik {
display: table-cell;
vertical-align: middle;
text-align: center;
}

.cerceve {

width: 500px;

background: #f3f3f3;

height: 450px;

display: table;

margin: 0px auto;

}

.icerik {

display: table-cell;

vertical-align: middle;

text-align: center;

}

Örnek :

Post Views: 15.486

“Css ile yatay ve dikey ortalama” üzerine 8 yorum

Hocam tam aradığım konuyu yayınlamışsınız emeğinize elinize sağlık.Bir blogdan daha fazlası bu olsa gerek.Başarı sizi bulsun.

Yanıtla

merhaba i.akşamlar benim siteme girdimde sitem ortalı gözüküyor ama sitemin seo analizi yaptımda örnek sitemin sablon içerik resimleri çıktında sitem sağa yanaşmış gözüküyor şaşırdım bu duruma başka sitenin seo analizini yaptım ortalı gözüküyor bu konuda rica etsemde benim ne yapmam gerektiğini bilgilendirebikirmisiniz tekrar tşk ederim…

Yanıtla

tam da aradığım şeydi teşekkürler 😉

Yanıtla

Güzel 🙂

Yanıtla

benim yapmak istediğim şey her çözünürlükte ki bilgisayarda bir divi dikey olarak ortalamak ben en dıştaki divime yükseklik vermek istemiyorum kendi bilgisayarıma göre yüksekliği ayarlar dikey olarak sizin verdiğniiz kodla ortalarım ama başkasının bilgisayar ekranı benimkinden küçük veya büyükse hiç bir anlamı kalmaz ki nasıl çözeceğim bunu ?

Yanıtla