Tek sayfaya özgü olduğu için böyle yaptım. Buradan atmam yeterli olur herhalde.
div
e display: table
içerideki elemana da display: table-cell
vererek.Dediğiniz şey maalesef istediğim işi yapmıyordiv
edisplay: table
içerideki elemana dadisplay: table-cell
vererek.
Al bu da örnek;
Ek olarak display: flex ile de yapabilirsin. Örneğe onu da ekledim.
Centering - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.jsfiddle.net
Konu üzerine hızlıca bir rehber de yazdım
Rehber: HTML ve CSS ile elemanları dikey ve yatay eksende ortalamak
Bu işlemi yapmak için birden fazla yöntem mevcut. 1. yöntem table ve table-cell kullanmak. 2. yöntem display: flex ile yapmak. 3. yöntem de position: absolute ile elemanı tabiri caiz ise uçurmak. 3. yöntemin dezavantajı içerideki elemanın sabit bir yükseklik ve genişliği olması gerekiyor...www.technopat.net
Elemanı tablo olarak göstermeye yarıyor. Sorunun çözüldü mü? Rehberde de birçok örnek bıraktım. Sorunu çözemezsen tekrar belirt.2) Table etiketi bize ne sağlıyor? inline-block' dan farkı ne?
MaalesefElemanı tablo olarak göstermeye yarıyor. Sorunun çözüldü mü? Rehberde de birçok örnek bıraktım. Sorunu çözemezsen tekrar belirt.
Tüm kodunu JSFiddle'a kopyalayıp, link atar mısın? Daha iyi yardımcı olabilirim.Maalesef
Ama bir sorun var display: flex ortalama yapmıyor. İlk yöntem de olmuyor. Son yöntem ise sayfa boyutu değişince bozuluyor. Ne yapmak gerek?
display: flex;
tek başın ortalama yapmaz. Rehberde yazdığım özelliklerin hepsini yazman gerek. Oradaki kodların hepsi önemli. Elemanın sabit bir yüksekliği ve genişliği olmalı align-items
ve justify-content
ayarlanmalı..flexElem {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
width: 500px;
border: 2px solid black;
}
Tek sayfaya özgü olduğu için böyle yaptım. Buradan atmam yeterli olur herhalde.
Flexbox yapısını araştırırsan aklındaki tasarımı çok daha rahat koda dökebilirsin.Maalesef
Ama bir sorun var display: flex ortalama yapmıyor. İlk yöntem de olmuyor. Son yöntem ise sayfa boyutu değişince bozuluyor. Ne yapmak gerek?
Bu sitenin çalışmasını sağlamak için gerekli çerezleri ve deneyiminizi iyileştirmek için isteğe bağlı çerezleri kullanıyoruz.