Elemanların yatay ve dikey hizalanması. CSS kullanarak bir bloğu ortalamak

CSS kullanarak bir nesneyi dikey olarak ortalamanın temelde farklı birkaç yolu vardır, ancak doğru olanı seçmek zor olabilir. Bunlardan bazılarına bakacağız ve ayrıca edindiğimiz bilgileri kullanarak küçük bir web sitesi yapacağız.

Dikey merkez hizalamayı CSS kullanarak başarmak kolay değildir. Birçok yol vardır ve hepsi her tarayıcıda çalışmaz. Şimdi 5 farklı yönteme ve her birinin artı ve eksilerine bakalım. Örnek.

Bu yöntem, bazı öğeleri tablo olarak görüntülenecek şekilde ayarladığımızı ve ardından bunun üzerinde (farklı öğelerde farklı şekilde çalışan) Vertical-align özelliğini kullanabileceğimizi varsayar.

Ortalanması gereken bazı yararlı bilgiler. #wrapper( ekran: tablo; ) #cell( ekran: tablo hücresi; dikey hizalama: orta; )

• İçerik yüksekliği dinamik olarak değiştirebilir (yükseklik CSS'de tanımlanmamıştır).
• Yeterli alan yoksa içerik kesilmez.

• IE 7 veya daha düşük sürümlerde çalışmıyor
• Çok sayıda iç içe geçmiş etiket

Bu yöntem div'in mutlak konumlandırmasını kullanır; üst kısım %50'ye ve kenar boşluğu eksi içerik yüksekliğinin yarısına ayarlanır. Bu, nesnenin CSS stillerinde tanımlanan sabit bir yüksekliğe sahip olması gerektiği anlamına gelir.

Yükseklik sabit olduğundan overflow:auto; ayarını yapabilirsiniz. içerik içeren bir div için, içerik sığmazsa kaydırma çubukları görünecektir.

İçerik Burada #content ( konum: mutlak; üst: %50; yükseklik: 240 piksel; kenar boşluğu: -120 piksel; /* eksi yüksekliğin yarısı */ )

• Tüm tarayıcılarda çalışır.
• Gereksiz yuvalama yoktur.

• Yeterli alan olmadığında içerik kaybolur (örneğin, div gövdenin içindedir ve kullanıcı pencereleri küçültmüştür, bu durumda kaydırma çubukları görünmeyecektir).

Bu yöntemde içerik div'ini başka bir div ile saracağız. Yüksekliğini %50'ye (yükseklik: %50;) ve alt kenar boşluğunu yüksekliğin yarısına (margin-bottom:-contentheight;) ayarlayalım. İçerik kayan noktayı temizleyecek ve ortalanacaktır.

işte içerik #floater( float: left; height: 50%; marj-bottom: -120px; ) #content( clear: her ikisi de; yükseklik: 240px; konum: göreceli; )

• Tüm tarayıcılarda çalışır.
• Yeterli alan olmadığında (örneğin, pencere küçültüldüğünde), içerik kırpılmadığında kaydırma çubukları görünecektir.

• Aklıma yalnızca tek bir şey geliyor: fazladan bir boş öğe kullanılıyor.

Bu yöntem, konum:mutlak; özelliğini kullanır. sabit boyutlara (genişlik ve yükseklik) sahip bir div için. Daha sonra koordinatlarını top:0; alt:0; ancak sabit bir yüksekliğe sahip olduğundan esneyemez ve merkeze doğru hizalanır. Bu, sabit genişlikli bir blok öğesini yatay olarak ortalamanın iyi bilinen yöntemine çok benzer (kenar boşluğu: 0 otomatik;).

Önemli bilgi. #içerik( konum: mutlak; üst: 0; alt: 0; sol: 0; sağ: 0; kenar boşluğu: otomatik; yükseklik: 240 piksel; genişlik: %70; )

• Çok basit.

• Internet Explorer'da çalışmıyor
• Kapta yeterli alan yoksa içerik kaydırma çubukları olmadan kesilecektir.

Bu yöntemi kullanarak metnin bir satırını ortaya hizalayabilirsiniz. Metnin yüksekliğini (satır yüksekliğini) öğe yüksekliğine (yüksekliğe) eşit olarak ayarlıyoruz. Bundan sonra çizgi ortada görüntülenecektir.

Bazı metin satırları #content( height: 100px; line-height: 100px; )

• Tüm tarayıcılarda çalışır.
• Uymuyorsa metni kesmez.

• Yalnızca metinle çalışır (blok öğelerle çalışmaz).
• Birden fazla metin satırı varsa çok kötü görünür.

Bu yöntem, metni bir düğme veya metin alanında ortalamak gibi küçük öğeler için çok kullanışlıdır.

Artık dikey merkez hizalamayı nasıl elde edeceğinizi biliyorsunuz, haydi şuna benzeyecek basit bir web sitesi hazırlayalım:

Anlamsal işaretlemeyle başlamak her zaman iyidir. Sayfamızın yapısı şu şekilde olacaktır:

• #floater (içeriği ortalamak için)
• #merkezli (merkezi öğe)
  • #taraf
    • #logo
    • #nav (liste
    • #içerik
  • #bottom (telif hakları ve diğer şeyler için)

  Aşağıdaki html işaretlemesini yazalım:

  Merkezli Bir Şirket Bir Şirket

  • Ev
  • Ürünler
  • Blog
  • Temas etmek
  • Hakkında
  Sayfa başlığı

  Süreç odaklı işbirliği ve fikir paylaşımından sonra katma değerli dış kaynak kullanımını bütünsel olarak yeniden tasarlayın. Etkili zorunluluklar aracılığıyla etkili niş pazarları enerjik bir şekilde basitleştirin. Zorlayıcı senaryoların ardından premium inovasyona bütünsel olarak hakim olun. Son teknoloji ürünü ürünlerle insan sermayesindeki yüksek standartları sorunsuz bir şekilde yeniden sermayelendirin. Güçlü girdaplardan önce standartlara uygun şemaları belirgin bir şekilde birleştirin. Kullanıma hazır bilgilerle karşılaştırıldığında, web'e hazır olma özelliğinden yararlanarak benzersiz bir şekilde yeniden sermayelendirin.

  Başlık 2

  Müşteri odaklı süreçler yerine özelleştirilmiş web hazırlığını verimli bir şekilde benimseyin. Proaktif teknolojiler karşısında platformlar arası zorunlulukları iddialı bir şekilde geliştirin. Kurumsal çapta arayüzler olmadan çok disiplinli meta hizmetleri kolayca güçlendirin. Odaklanmış e-pazarlarla rekabetçi stratejik tema alanlarını uygun şekilde düzenleyin. Fosfloresanlı olarak birinci sınıf toplulukları katma değerli pazarlara karşı birleştirir. Güçlü e-hizmetlerden önce bütünsel hizmetleri uygun şekilde yeniden icat edin.

  Telif hakkı bildirimi buraya gelecek

  Adım 2

  Şimdi öğeleri sayfaya yerleştirmek için en basit CSS'yi yazacağız. Bu kodu bir style.css dosyasına kaydetmelisiniz. Bağlantının html dosyasına yazılması budur.

  Html, gövde ( kenar boşluğu: 0; dolgu: 0; yükseklik: %100; ) gövde ( arka plan: url("page_bg.jpg") %50 %50 tekrarsız #FC3; yazı tipi ailesi: Georgia, Times, serifler; ) #floater ( konum: göreceli; kayan nokta: sol; yükseklik: %50; kenar boşluğu: -200 piksel; genişlik: 1 piksel; ) #centered ( konum: göreceli; açık: sol; yükseklik: 400 piksel; genişlik: %80; maksimum -genişlik: 800 piksel; minimum genişlik: 400 piksel; kenar boşluğu: 0 otomatik; arka plan: #fff; kenarlık: 4 piksel katı #666; ) #bottom ( konum: mutlak; alt: 0; sağ: 0; ) #nav ( konum: mutlak; sol: 0; üst: 0; alt: 0; sağ: %70; dolgu: 20 piksel; kenar boşluğu: 10 piksel; ) #içerik ( konum: mutlak; sol: %30; sağ: 0; üst: 0; alt: 0; taşma: otomatik; yükseklik: 340 piksel; dolgu: 20 piksel; kenar boşluğu: 10 piksel; )

  İçerik merkezimizi hizalamadan önce gövde ve html yüksekliğini %100 olarak ayarlamamız gerekiyor. Yükseklik iç ve dış dolgu (dolgu ve kenar boşluğu) olmadan hesaplandığından, kaydırma çubuklarının olmaması için bunları (dolgu) 0 olarak ayarladık.

  Bir "kayan nokta" öğesinin alt kenar boşluğu, içerik yüksekliğinin (400 piksel) eksi yarısına eşittir, yani -200 piksel;

  Sayfanız artık şöyle görünmelidir:

  

  #centered öğe genişliği %80. Bu, sitemizi küçük ekranlarda daha dar, büyük ekranlarda ise daha geniş hale getirir. çoğu site sol üst köşedeki yeni geniş monitörlerde uygunsuz görünüyor. Min-width ve max-width özellikleri de sayfamızı çok geniş veya çok dar görünmeyecek şekilde sınırlandırır. Internet Explorer bu özellikleri desteklemez. Sabit bir genişliğe ayarlamanız gerekir.

  #centered elemanının konum:relatif kümesi olduğundan, içindeki elemanların mutlak konumlandırmasını kullanabiliriz. Daha sonra taşmayı ayarlayın:otomatik; #content öğesi için, içerik sığmazsa kaydırma çubuklarının görünmesi için.

  Aşama 3

  Yapacağımız son şey, sayfanın biraz daha çekici görünmesini sağlamak için biraz stil eklemek. Menüyle başlayalım.

  #nav ul ( liste stili: yok; dolgu: 0; kenar boşluğu: 20 piksel 0 0 0; metin girintisi: 0; ) #nav li ( dolgu: 0; kenar boşluğu: 3 piksel; ) #nav li a ( ekran: blok; arka plan rengi: #e8e8e8; dolgu: 7 piksel; kenar boşluğu: 0; metin dekorasyonu: yok; renk: #000; kenarlık alt: 1 piksel katı #bbb; metin hizalama: sağ; ) #nav li a::after ( içerik: """; renk: #aaa; yazı tipi ağırlığı: kalın; görüntüleme: satır içi; kayan nokta: sağ; kenar boşluğu: 0 2px 0 5px; ) #nav li a:hover, #nav li a:focus ( arka plan: # f8f8f8; border-bottom-color: #777; ) #nav li a:hover::after ( kenar boşluğu: 0 0 0 7px; color: #f93; ) #nav li a:active ( dolgu: 8px 7px 6px 7px; )

  Menünün daha iyi görünmesini sağlamak için yaptığımız ilk şey, list-style:none niteliğini ayarlayarak madde işaretlerini kaldırmak ve ayrıca farklı tarayıcılarda varsayılan olarak büyük ölçüde farklılık gösterdikleri için padding ve padding'i ayarlamaktı.

  Daha sonra bağlantıların blok öğeler olarak işlenmesi gerektiğini belirttiğimize dikkat edin. Artık görüntülendiklerinde, bulundukları öğenin tüm genişliği boyunca gerilirler.

  Menü için kullandığımız bir diğer ilginç şey ise sözde sınıflardır:before ve:after. Bir öğenin önüne ve arkasına bir şeyler eklemenizi sağlarlar. Bu, her bağlantının sonuna ok gibi simgeler veya semboller eklemenin iyi bir yoludur. Bu hile Internet Explorer 7 ve altında çalışmaz.

  

  4. Adım

  Ve son olarak, daha da güzel olması için tasarımımıza birkaç vida ekleyeceğiz.

  #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( yazı tipi ailesi: Helvetica, Arial, sans- serif; yazı tipi ağırlığı: normal; renk: #666; ) h1 ( renk: #f93; kenarlık alt: 1px düz #ddd; harf aralığı: -0,05em; yazı tipi ağırlığı: kalın; kenar boşluğu: 0; padding-top: 0; ) #bottom ( padding: 10px; font-size: 0,7em; color: #f03; ) #logo ( font-size: 2em; text-align: center; color: #999; ) #logo güçlü ( yazı tipi ağırlığı: normal; ) #logo aralığı ( görüntü: blok; yazı tipi boyutu: 4 em; satır yüksekliği: 0,7 em; renk: #666; ) p, h2, h3 ( satır yüksekliği: 1,6 em; ) a ( renk: #f03; )

  Bu stillerde #centered öğesi için yuvarlatılmış köşeler ayarladık. CSS3'te bu, border-radius özelliği tarafından yapılacaktır. Bu, Mozilla Firefox ve Safari/Webkit için -moz ve -webkit öneklerinin kullanılması dışında bazı tarayıcılarda henüz uygulanmamıştır.

  

  Uyumluluk

  Muhtemelen zaten tahmin ettiğiniz gibi uyumluluk sorunlarının ana kaynağı Internet Explorer'dır:

  • #floater öğesinin genişlik ayarı olmalıdır
  • IE 6'da menülerin etrafında ekstra dolgu var

  235882 görüntüleme

  Çoğu zaman görev, bir bloğu sayfanın / ekranın ortasına hizalamaktır ve hatta bir Java betiği olmadan, katı boyutlar veya negatif girintiler ayarlamadan ve blok boyutunu aşarsa kaydırma çubukları üst öğe için çalışacak şekilde hizalamaktır. . İnternette bir bloğun ekranın ortasına nasıl hizalanacağına dair oldukça fazla monoton örnek var. Kural olarak çoğu aynı ilkelere dayanmaktadır.
  
  Aşağıda sorunu çözmenin ana yolları, artıları ve eksileri bulunmaktadır. Örneklerin özünü anlamak için, verilen bağlantılardaki örneklerde Sonuç penceresinin yüksekliğini/genişliğini azaltmanızı öneririm.

  Seçenek 1: Negatif girinti. Bloğu üst ve sol nitelikleri %50 olacak şekilde konumlandırıyoruz ve bloğun yüksekliğini ve genişliğini önceden bilerek bloğun boyutunun yarısına eşit bir negatif kenar boşluğu belirliyoruz. Bu seçeneğin büyük bir dezavantajı, negatif girintileri saymanız gerekmesidir. Ayrıca blok, kaydırma çubuklarıyla çevrelendiğinde pek doğru davranmıyor; negatif kenar boşluklarına sahip olduğu için basitçe kesiliyor.

  

  Parent ( genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; taşma: otomatik; ) .block ( genişlik: 250 piksel; yükseklik: 250 piksel; konum: mutlak; üst: %50; sol : %50; kenar boşluğu: -125 piksel 0 0 -125 piksel; img (maksimum genişlik: %100; yükseklik: otomatik; görüntüleme: blok; kenar boşluğu: 0 otomatik; kenarlık: yok; ))

  Seçenek 2. Otomatik girinti. Daha az yaygın, ancak ilkine benzer. Blok için genişliği ve yüksekliği ayarlıyoruz, nitelikleri sağ üst alt sol olarak 0 olarak konumlandırıyoruz ve kenar boşluğunu otomatik olarak ayarlıyoruz. Bu seçeneğin avantajı, eğer ebeveynin genişliği ve yüksekliği %100 ayarlanmışsa, kaydırma çubuklarının ana öğe üzerinde çalıştırılmasıdır. Bu yöntemin dezavantajı boyutların katı bir şekilde ayarlanmasıdır.

  

  Parent ( genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; taşma: otomatik; ) .block ( genişlik: 250 piksel; yükseklik: 250 piksel; konum: mutlak; üst: 0; sağ: 0; alt: 0; sol: 0; kenar boşluğu: otomatik; img (maksimum genişlik: %100; yükseklik: otomatik; görüntüleme: blok; kenar boşluğu: 0 otomatik; kenarlık: yok; ))

  Seçenek 3. Tablo. Üst öğe için tablo stillerini ayarladık ve metin hizalamasını üst hücre için merkeze ayarladık. Ve bloğa bir çizgi blok modeli veriyoruz. Aldığımız dezavantajlar, çalışmayan kaydırma çubuklarıdır ve genel olarak tablonun "emülasyonunun" estetiği yoktur.

  

  Parent ( genişlik: %100; yükseklik: %100; ekran: tablo; konum: mutlak; üst: 0; sol: 0; > .inner ( ekran: tablo hücresi; metin hizalama: orta; dikey hizalama: orta; )) ) .block ( display: satır içi blok; img ( display: blok; kenarlık: yok; ))

  Bu örneğe kaydırma eklemek için tasarıma bir öğe daha eklemeniz gerekecek.
  Örnek: jsfiddle.net/serdidg/fk5nqh52/3.

  Seçenek 4. Sözde öğe. Bu seçenek, önceki yöntemlerde listelenen sorunların tümünü içermez ve aynı zamanda orijinal sorunları da çözer. Buradaki fikir, ebeveyn üzerindeki before sözde elemanını, yani %100 yükseklik, merkez hizalama ve satır içi blok modelini stillendirmektir. Aynı şekilde bloğun kendisi de merkeze hizalanmış bir çizgi blok modeline ayarlanmıştır. İlk bloğun boyutu üst öğesinden daha büyük olduğunda bloğun sözde öğenin altına "düşmesini" önlemek için üst öğeye white-space: nowrap ve font-size: 0'ı belirtiriz, ardından bu stilleri iptal ederiz. aşağıdakileri içeren blok - boşluk: normal. Bu örnekte, kod formatı nedeniyle ebeveyn ile blok arasında ortaya çıkan boşluğu kaldırmak için font-size: 0 gereklidir. Boşluk başka yollarla da kaldırılabilir, ancak bundan kaçınmanın en iyisi olduğu düşünülmektedir.

  

  Parent ( genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; taşma: otomatik; beyaz boşluk: nowrap; metin hizalama: orta; yazı tipi boyutu: 0; &:before ( yükseklik: %100; ekran: satır içi blok; dikey hizalama: orta; içerik: ""; ) .block ( ekran: satır içi blok; beyaz boşluk: normal; dikey hizalama: orta; metin hizalama: sol ; img (ekran: blok; kenarlık: yok; ))

  Veya, ebeveynin sayfanın tamamını değil, yalnızca pencerenin yüksekliğini ve genişliğini kaplamasına ihtiyacınız varsa:

  Parent ( konum: sabit; üst: 0; sağ: 0; alt: 0; sol: 0; taşma: otomatik; beyaz boşluk: şimdi rap; metin hizalama: orta; yazı tipi boyutu: 0; &:before ( yükseklik: 100%; ekran: satır içi blok; dikey hizalama: orta; içerik: ""; ) .block ( ekran: satır içi blok; boşluk: normal; dikey hizalama: orta; metin hizalama: sol; img ( ekran: blok; kenarlık: yok; ))

  Seçenek 5. Flexbox. En basit ve en şık yollardan biri flexbox kullanmaktır. Gereksiz vücut hareketleri gerektirmez, olup bitenin özünü oldukça net bir şekilde anlatır ve son derece esnektir. Bu yöntemi seçerken hatırlamaya değer tek şey, sürüm 10'dan itibaren IE desteğidir. caniuse.com/#feat=flexbox

  

  Ana ( genişlik: %100; yükseklik: %100; konum: sabit; üst: 0; sol: 0; görüntüleme: esnek; hizalama öğeleri: orta; hizalama içeriği: orta; yaslama içeriği: orta; taşma: otomatik; ) .block ( arka plan: #60a839; img ( ekran: blok; kenarlık: yok; ))

  Seçenek 6. Dönüştürme. Yapıyla sınırlıysak ve ana öğeyi değiştirmenin bir yolu yoksa, ancak bloğun bir şekilde hizalanması gerekiyorsa uygundur. Css işlevi Translate() kurtarmaya gelecektir. %50 mutlak konumlandırma değeri, bloğun sol üst köşesini tam olarak merkeze konumlandıracak, ardından negatif bir dönüştürme değeri, bloğu kendi boyutlarına göre hareket ettirecektir. Olumsuz etkilerin bulanık kenarlar veya yazı tipi stili şeklinde görünebileceğini lütfen unutmayın. Ayrıca bu yöntem java-script kullanılarak bloğun konumunun hesaplanmasında sorunlara yol açabilir.Bazen CSS left özelliğinin kullanımından kaynaklanan %50 genişlik kaybını telafi etmek için blok için belirtilen kural kullanılabilir. yardım: kenar boşluğu-sağ: -50%; .

  

  Parent ( genişlik: %100; yükseklik: %100; konum: sabit; üst: 0; sol: 0; taşma: otomatik; ) .block ( konum: mutlak; üst: %50; sol: %50; transform: tercüme et( -50%, -50%); img ( ekran: blok; ))

  Seçenek 7. Düğme. Bloğun bir düğme etiketiyle çerçevelendiği kullanıcı seçeneği. Düğme, içindeki her şeyi, yani satır içi ve blok satırı (satır içi blok) modelinin öğelerini ortalamak özelliğine sahiptir. Pratikte kullanmanızı tavsiye etmiyorum.

  

  Parent ( genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; taşma: otomatik; arka plan: yok; kenarlık: yok; taslak: yok; ) .block ( display: inline-block; img (ekran: blok;; kenarlık: yok; ))

  Bonus 4. seçenek fikrini kullanarak, blok için dış kenar boşluklarını ayarlayabilirsiniz ve aynı zamanda ikincisi, kaydırma çubuklarıyla çevrili olarak yeterince görüntülenecektir.
  Örnek: jsfiddle.net/serdidg/nfqg9rza/2.

  Ayrıca görüntüyü merkeze hizalayabilirsiniz ve görüntü üst öğeden büyükse onu üst öğenin boyutuna göre ölçeklendirebilirsiniz.
  Örnek: jsfiddle.net/serdidg/nfqg9rza/3.
  Büyük resimli örnek:

  Bir tasarımcının bazen bir sorusu vardır: Öğeler dikey olarak nasıl ortalanır? Bu da bazı sorunlara neden oluyor. Ancak elemanları dikey olarak ortalamak için çeşitli yöntemler vardır ve bu yöntemlerin her biri oldukça basittir. Bu makalede bu yöntemlerden bazıları açıklanmaktadır.

  Her yöntemi çalışırken görmek için demo düğmesine veya resme tıklayın.

  Dikey merkezlemeyi engelleyen bazı konuları tartışalım.

  Dikey Hizalama

  Bir öğeyi yatay olarak ortalamanın uygulanması oldukça kolaydır (CSS kullanarak). Satır içi bir öğe, ana kapsayıcısına center'ın text-align özelliği verilerek yatay olarak ortalanabilir. Bir öğe bir blok öğe olduğunda, onu ortalamak için genişliği (genişlik) ayarlamanız ve sağ (kenar boşluğu-sağ) ve sol (kenar boşluğu-sol) kenar boşluklarının değerlerini auto olarak ayarlamanız yeterlidir.

  Metinle ilgili olarak: birçok kişi ortalamak için dikey hizalama özelliğini kullanmaya başlıyor. Mantıklı ve ilk tercihim aynı olurdu. Tablodaki bir öğeyi ortalamak için valign özelliğini kullanabilirsiniz.

  Ancak valign özelliği yalnızca bir hücreye uygulandığında çalışır (örneğin, ). CSS dikey hizalama özelliği bir hücreye ve bazı satır içi öğelere uygulanabilir.

  • Metin satır yüksekliğine (satır aralığı) göre ortalanır.
  • Tablo ile ilgili olarak detaya girmeden sıra yüksekliğine göre merkezleme meydana gelir.

  Ne yazık ki, dikey hizalama özelliği, div etiketi içindeki paragraf (p) gibi blok düzeyindeki öğelere uygulanamaz.

  Ancak öğeleri dikey olarak ortalamak için başka yöntemler de vardır ve gerektiğinde yine de dikey hizalama özelliğini kullanabilirsiniz. Hangi yöntemi kullanacağınız, neyi merkezleyeceğinize bağlıdır.

  Satır aralığı veya Satır yüksekliği

  Bu yöntem yalnızca bir metin satırını ortalamanız gerektiğinde kullanılmalıdır. Bunu yapmak için metni içeren öğenin satır yüksekliğini (satır aralığını) yazı boyutundan büyük olacak şekilde ayarlamanız gerekir.

  Varsayılan olarak metnin üstünde ve altında eşit boşluk olduğundan metin dikey olarak ortalanır.

  Bu durumda ana elemanın yüksekliğini belirtmeye gerek yoktur.

  İşte metin