Body Dikey Ortalama (CSS) |
10 Mesajlar | 2.890 Okunma | ||
- Üyelik 22.11.2013
- Yaş/Cinsiyet 34 / E
- Meslek Bilgisayar Programcılığı
- Konum İstanbul Avrupa
- Ad Soyad Y** A**
- Mesajlar 435
- Beğeniler 90 / 80
- Ticaret 1, (%100)
Merhaba. Body içerisinde yer alan bütün içeriklerin hiç pay bırakılmadan nasıl dikey olarak ortalanmasını sağlayabilirim? Yardımcı olan herkese şimdiden teşekkürler.
Skype: mehmetgyazilim
- Üyelik 10.07.2012
- Yaş/Cinsiyet 29 / E
- Meslek Developer
- Konum Konya
- Ad Soyad M** A**
- Mesajlar 1120
- Beğeniler 1086 / 244
- Ticaret 1, (%100)
<script>
var yukseklik = $(window).height();
var div = $('.benimdivim').height();
var ortala = (yukseklik - div) / 2;
div.css("margin-top",ortala);
</script>
body tagı kapanmadan hemen önce yapıştırıp kullanabilirsin ama normal css kodundan sağlıklı değildir.
İyi Çalışmalar..
- Üyelik 22.11.2013
- Yaş/Cinsiyet 34 / E
- Meslek Bilgisayar Programcılığı
- Konum İstanbul Avrupa
- Ad Soyad Y** A**
- Mesajlar 435
- Beğeniler 90 / 80
- Ticaret 1, (%100)
CSS ile bir yolu yok mu?
Skype: mehmetgyazilim
- Üyelik 02.02.2014
- Yaş/Cinsiyet 26 / E
- Meslek -
- Konum Diğer
- Ad Soyad D** Ö**
- Mesajlar 478
- Beğeniler 189 / 158
- Ticaret 4, (%100)
İçerik Buraya Girilecek .
#ortala{width:1000px;margin:0 auto;}
Bu sekilde yapabilirsin
- Üyelik 22.11.2013
- Yaş/Cinsiyet 34 / E
- Meslek Bilgisayar Programcılığı
- Konum İstanbul Avrupa
- Ad Soyad Y** A**
- Mesajlar 435
- Beğeniler 90 / 80
- Ticaret 1, (%100)
Böyle bir görüntü oluştu maalesef. Benim istediğim bu değil.
Skype: mehmetgyazilim
- Üyelik 22.01.2013
- Yaş/Cinsiyet 28 / E
- Meslek Özel Sektör / Bilgi İşlem
- Konum İstanbul Anadolu
- Ad Soyad A** G**
- Mesajlar 520
- Beğeniler 27 / 121
- Ticaret 0, (%0)
Arkadaşım sana şöyle bir açıklamada bulunayım, inşallah anlatabilirim.
Bir tane kare içinde yazı olduğunu varsayalım. Bu yazı ile karenin mesafesini azaltmak için "padding" dediğimiz kod kullanılır.
Ama sen kareyi bilgisayarın ekranındaki çerçevelere yakınlaştırmak - uzaklaştırmak - birleştirmek istiyorsan, "margin" adlı etiketi (kodu) kullanman gerekiyor.
Örneğin ;
margin : 10px 0 0 10px;
dersen => alttan ve üstten 10px boşluk bırakır ve yanlara yapıştırır.
Bu yöntemi dene belki olur :)
Bir tane kare içinde yazı olduğunu varsayalım. Bu yazı ile karenin mesafesini azaltmak için "padding" dediğimiz kod kullanılır.
Ama sen kareyi bilgisayarın ekranındaki çerçevelere yakınlaştırmak - uzaklaştırmak - birleştirmek istiyorsan, "margin" adlı etiketi (kodu) kullanman gerekiyor.
Örneğin ;
margin : 10px 0 0 10px;
dersen => alttan ve üstten 10px boşluk bırakır ve yanlara yapıştırır.
Bu yöntemi dene belki olur :)
- Üyelik 23.10.2012
- Yaş/Cinsiyet 28 / E
- Meslek Öğrenci
- Konum Muğla
- Ad Soyad ** **
- Mesajlar 48
- Beğeniler 1 / 8
- Ticaret 0, (%0)
Css'te calc() fonksiyonu var.Örnek :
div#test { width:1000px; height:300px; margin-top:calc( (100% - 300)/2 ); }
- Üyelik 28.12.2012
- Yaş/Cinsiyet 40 / E
- Meslek E-Ticaret
- Konum İstanbul Avrupa
- Ad Soyad S** U**
- Mesajlar 122
- Beğeniler 17 / 16
- Ticaret 4, (%100)
KaanGundovan adlı üyeden alıntı
Arkadaşım sana şöyle bir açıklamada bulunayım, inşallah anlatabilirim.Bir tane kare içinde yazı olduğunu varsayalım. Bu yazı ile karenin mesafesini azaltmak için "padding" dediğimiz kod kullanılır.
Ama sen kareyi bilgisayarın ekranındaki çerçevelere yakınlaştırmak - uzaklaştırmak - birleştirmek istiyorsan, "margin" adlı etiketi (kodu) kullanman gerekiyor.
Örneğin ;
margin : 10px 0 0 10px;
dersen => alttan ve üstten 10px boşluk bırakır ve yanlara yapıştırır.
Bu yöntemi dene belki olur :)
"dersen => alttan ve üstten 10px boşluk bırakır ve yanlara yapıştırır."
burada yanlış bilgi vermişsiniz hocam. margin : 10px 0 0 10px; Üstten ve soldan.
Uğraştığınız sayfa online ise veya teamviewer varsa halledeyim.
- Üyelik 17.03.2014
- Yaş/Cinsiyet 27 / E
- Meslek öğrenci
- Konum İstanbul Avrupa
- Ad Soyad O** U**
- Mesajlar 16
- Beğeniler 0 / 0
- Ticaret 0, (%0)
Çıktısı;
dikey ortala
example world..
- Üyelik 02.01.2014
- Yaş/Cinsiyet - /
- Meslek
- Konum
- Ad Soyad ** **
- Mesajlar 1852
- Beğeniler 346 / 707
- Ticaret 5, (%100)
Bunun için body'e 100% genişlik ve 100% yükseklik vermen gerek.
body{width:100%;height:100%;margin:0px auto;border:1px solid;}
Burada body'e çerçeve verdik. Buna padding ayarlayıp çerçeve içinde kalan herşeyi ortaya doğru sıkıştırman gerekecek.
body{width:100%;height:100%;margin:0px auto;border:1px solid;
padding: Xpx Xpx Xpx Xpx;
}
Ortalamak istediğin div in boyutları belliyse, body padding lerini yüzdelik olarak verip hep ortada kalmasını sağlarsın.
Birde vertical-align:middle seçeneği var ama o sadece inline elementlerde çalışır. Senin ortalayacağın div de ne var ne yok bilemediğim için onu kendin araştır bul.
Ama ona da örnek vereyim.
.ortalanacakdiv{display:inline-block; height:30%;width:40%;vertical-align:middle;}
.body{width:100%;height:100%;margin:0px auto;border:1px solid;
padding: 30% 20% 30% 20%;}
Ama olmadı deme. Senin içerikle burdaki örnek aynı değil. Olayın mantığını anlasaydın üst tarafta verilen örnekler de çözerdi sorununu.
Ek Olarak:
Ek Olarak:
Ek Olarak:
dikey ortala
body{width:100%;height:100%;margin:0px auto;border:1px solid;}
Burada body'e çerçeve verdik. Buna padding ayarlayıp çerçeve içinde kalan herşeyi ortaya doğru sıkıştırman gerekecek.
body{width:100%;height:100%;margin:0px auto;border:1px solid;
padding: Xpx Xpx Xpx Xpx;
}
Ortalamak istediğin div in boyutları belliyse, body padding lerini yüzdelik olarak verip hep ortada kalmasını sağlarsın.
Birde vertical-align:middle seçeneği var ama o sadece inline elementlerde çalışır. Senin ortalayacağın div de ne var ne yok bilemediğim için onu kendin araştır bul.
Ama ona da örnek vereyim.
.ortalanacakdiv{display:inline-block; height:30%;width:40%;vertical-align:middle;}
.body{width:100%;height:100%;margin:0px auto;border:1px solid;
padding: 30% 20% 30% 20%;}
Ama olmadı deme. Senin içerikle burdaki örnek aynı değil. Olayın mantığını anlasaydın üst tarafta verilen örnekler de çözerdi sorununu.
Ek Olarak:
Ek Olarak:
Ek Olarak:
example world..
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)