CSS ile sayfalarımızı ve elementlerimizi ortalamak
CSS’de kullandığımız içerik alanlarını (blok-level ve inline-level) elementleri nasıl oratalayacağımızı göreceğiz. Inline-level elementleri text-align:center özelliğini kullanarak ortalayabiliriz. Blok-level elementleri ortalamak için ise bir iki metod vardır. Sırası ile inceleyelim.
1- Genişleyebilir blok-level elementleri ortalamak
.ortala
{
margin-left: 10%;
margin-right: 10%;
}
<p class="ortala">Lorem Ipsum is simply dummy text of the printing and typesettingindustry. </p>
Genişliği sabit olmayan, genişleyebilir blok-level elementlerin ortalanması için bu metod kullanılır. Tüm web tarayıcılı bu metodu destekler.
2- Sabit genişlik atanan blok-level elementlerini ortalamak
2.a. margin auto ile genişliği belirlenmiş elementleri ortalamak
Mantık olarak, içerik blokunun sağ ve sol margin değerlerine auto ataması yapıyoruz.
W3C’de bu konu hakkında şu ifade mevcuttur: "Eğer margin-left ve margin-right değerleri auto verilirse bu blokun ortalanması anlamına gelir."
.ortala2
{
margin-left: auto;
margin-right: auto;
width: 50em;
}
NN4 (Mac and Win), Win/IE4, Win/IE5, Win/IE5.5, Win/IE6 (Garip mod : quirks-mode) web tarayıcılıar bu kodu desteklememektedir.
Bu sorunu aşabilemke için iki satır kod yazmamız yeterli olacaktır.(NN4 hariç)
Bu metodu desteklemeyen web tarayıcıları için body etiketine text-align:center ataması yaptığımızda sorun çözülmüş demektir.
body
{
text-align: center;
}
.ortala2
{
margin-left: auto;
margin-right: auto;
width: 50em;
}
Yanlız bir sorunumuz daha var. text-align:center ataması body içindeki tüm elementlerin ortalanmasına neden olacaktır. Bunu engellemek için bir katman oluşturup bu katman da hizalama değerini başlangıç değerine(yani sola yaslamalıyız) çevirmeliyiz.
body
{
text-align: center;
}
.ortala2
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}
Bu kodlama tüm web tarayıcılarında çalışacaktır.(NN4 hariç)
2.b. Konumlandırma(positioning) kullanılan elementlerin negatif margin ile ortalanması
Göreceli konumlandırılmış elementleri ortalamak için bu metod kullanılabilir. Bu metod da bir önceki gibi fazladan bir katman kullanmaya gerek yoktur. Genişlik tanımı yapılan göreceli konumlandırılmış elementin margin-left değeri element genişliğinin yarısı(1/2) kadar verilerek sağlanır.
.ortala3 {
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
}
Burada sizlere bir iki metodla element ortalamayı gösterdik. Siz kullandığınız yer ve ihtiyaçlarınıza göre bunlardan birini kullanabilirsiniz.
çok sağol sayende css tasarımlara başladım. bundan sonra takılırsam sana danışırım :) umarım problem olmaz.
@fesih yabar
#baslik{ width:600px; height:49px; margin:o auto;}
yeterli
yaw ben body {text-align:center} yapıyorum ie de ortalanıyor ama firefox ta olmuyor kodun tamamını vereyim belki diğer kodlarda hata yapmışımdır.
31
2 Yorum
Son verdiğiniz kod işime yaradı, teşekkürler.
kapsayan elemana position relative verip
içteki elemana position:absolute verip
top:0 verince üste
bottom:0 verince alta yaslar.
düzeltme;
- – eski – -
iyi çalışmalar;
nesneleri dikey dogrultuda nasil hizalayabiliriz ?
mesela bir img m var ve ben bunu css ile tablonun tavanına yaslamak yada tabana indirmek istiyorum…
sağa yada sola yaslarken float kodunu kullanıyorum herhangi bir sorun çıkmıyor dikey olarak hizalarken margin-bottom yada margin-top komutlarını kullanarak hizalamaya çalışıyorum (tahmin edebildiğim tek alternatifim bu ve aslında mantklıda geliyor) ancak sonuç vermiyor.
teşekkür ederim…
- – /eski – -
- – yeni – -
iyi çalışmalar;
nesneleri dikey dogrultuda nasil hizalayabiliriz ?
mesela bir img m var ve ben bunu css ile tablonun tavanına yaslamak yada tabana indirmek istiyorum…
sağa yada sola yaslarken float kodunu kullanıyorum herhangi bir sorun çıkmıyor dikey olarak hizalarken margin-bottom yada margin-top kullanıyorum “ancak” iki img yan yana oldugunda ve birinin height değeri diğerinden yüksek oldugundan (birinin float değeri left diğerinin ki right) sorun çıkıyor.
sorunu nasıl çözebilirim ?
teşekkür ederim…
- – /yeni – -
iyi çalışmalar;
nesneleri dikey dogrultuda nasil hizalayabiliriz ?
mesela bir img m var ve ben bunu css ile tablonun tavanına yaslamak yada tabana indirmek istiyorum…
sağa yada sola yaslarken float kodunu kullanıyorum herhangi bir sorun çıkmıyor dikey olarak hizalarken margin-bottom yada margin-top komutlarını kullanarak hizalamaya çalışıyorum (tahmin edebildiğim tek alternatifim bu ve aslında mantklıda geliyor) ancak sonuç vermiyor.
teşekkür ederim…
Göstermiş olduğunuz ilgiden dolayı çok teşekkürler, sorunumu hallettim.
o konudaki menün position ile tanımlandığı için
dışa bir katman atıp position:relative verip menüye de postion:absolute vererek halledebilirsin.
Gerisi yukardaki yöntem
Merhaba Fatih bey,
http://esertepemahallesi.tr.gg/ sitesine bir intro koydum.
http://www.fatihhayrioglu.com/?p=222 konu başlığını incleyerek böyle bir intro hazırladım. Öncelikle çok teşekkürler. Ancak hiç bir şekilde ortalayamadım, yardımcı olabilir misiniz?
Sevgiler, saygılar.