Elemanları yatay ve dikey olarak hizalama çeşitli şekillerde yapılabilir. Yöntem seçimi, elemanın tipine (blok veya satır içi), konumlandırma tipine, boyutuna vb. bağlıdır.

1. Blok / sayfanın ortasına yatay hizalama

1.1. Blok bir genişliğe sahipse:

div ( genişlik: 300 piksel; kenar boşluğu: 0 otomatik; /* öğeyi üst blok içinde yatay olarak ortalayın*/ )

Bir satır içi öğeyi bu şekilde hizalamak istiyorsanız, onu display:block;

1.2. Bir blok başka bir blok içinde yuvalanmışsa ve bunun için bir genişlik/genişlik ayarlanmamışsa:

.wrapper(metin hizalama:merkez;)

1.3. Blok bir genişliğe sahipse ve ana bloğun ortasına sabitlenmesi gerekiyorsa:

.wrapper (konum: göreceli; /*kutuyu daha sonra içine kesinlikle yerleştirebilmemiz için ana kutuyu göreceli konuma ayarlayın*/) .box ( genişlik: 400 piksel; konum: mutlak; sol: %50; kenar boşluğu: - 200px; / *bloğu genişliğinin yarısı kadar bir mesafeyle sola kaydır*/ )

1.4. Bloklar için genişlik ayarlanmamışsa, ana sarmalayıcı bloğunu kullanarak ortalayabilirsiniz:

.wrapper (metin hizalama: merkez; /* bloğun içeriğini ortalayın*/) bloklar arasında girinti yapın*/ )

2. Dikey hizalama

2.1. Metin, örneğin düğmeler ve menü öğeleri için bir satır kaplıyorsa:

.button ( yükseklik: 50 piksel; satır yüksekliği: 50 piksel; )

2.2. Bir bloğu ana bloğun içinde dikey olarak hizalamak için:

.wrapper (konum: göreceli;) .box ( yükseklik: 100 piksel; konum: mutlak; üst: %50; kenar boşluğu: -50 piksel 0 0 0; )

2.3. Tablo türüne göre dikey hizalama:

.wrapper ( görüntü: tablo; genişlik: %100; ) .box ( görüntü: tablo hücresi; yükseklik: 100 piksel; metin hizalama: merkez; dikey hizalama: orta; )

2.4. Kutunun genişliği ve yüksekliği ayarlanmışsa ve ana kutuda ortalanması gerekiyorsa:

.wrapper ( konum: göreli; ) .box ( yükseklik: 100 piksel; genişlik: 100 piksel; konum: mutlak; üst: 0; sağ: 0; alt: 0; sol: 0; kenar boşluğu: otomatik; taşma: otomatik; /*to içerik yayılmadı */ )

2.5. CSS3 dönüşümü kullanarak sayfanın/bloğun ortasına mutlak konumlandırma:

elemanın boyutları varsa

div ( width: 300px; /*blok genişliğini ayarla*/ height:100px; /*blok yüksekliğini ayarla*/ transform: translate(-50%, -50%); konum: mutlak; üst: %50; sol: %50 ;)

elemanın boyutu yoksa ve boş değilse

h1 ( kenar boşluğu: 0; dönüştürme: çevir(-50%, -50%); konum: mutlak; üst: %50; sol: %50; )

Site sayfalarının ortasına yerleşim ve hizalama yaratıcı bir konudur ve genellikle yeni başlayanlar için zorluklara neden olur. Öyleyse nasıl yapacağımıza bir bakalım. Aşağıdaki yapıya sahip bir sayfa yapmak istediğimizi varsayalım:

Sayfamız dört bloktan oluşmaktadır: başlık (başlık), menü (menü), içerik (içerik) ve sitenin alt kısmı (altbilgi). Sayfayı ortalamak için bu dört kutuyu bir ana kutuya koyacağız:

Site başlığı

İçerik

Sitenin alt kısmı

Bu yapı örneğinde, birkaç seçeneği ele alacağız.

Kauçuk sitenin yerleşimi ve merkezlenmesi

Bir kauçuk site döşenirken, kullanılan ana ölçüm birimi -%, çünkü site genişliğe kadar uzanmalı ve tüm boş alanı kaplamalıdır.

Bu nedenle, "üstbilgi" ve "altbilgi" bloklarının genişliği, ekran genişliğinin %100'ü olacaktır. "Menü" bloğunun genişliği %30 olsun ve "içerik" bloğunun "menü" bloğunun yanına yerleştirilmesine izin verin, yani. "menü" bloğunun genişliğine eşit bir sol kenar boşluğuna (sol kenar boşluğu) sahip olmalıdır, yani. otuz%.

"Menü" ve "içerik" bloklarının yan yana yer alması için "menü" bloğunu kayan hale getirelim ve sol kenara itelim. Ayrıca bloklarımız için arka plan renklerini de ayarlayacağız. Şimdi tüm bunları bir stil sayfasına yazalım (style.css sayfasında)

#header( background:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float :sol; genişlik %30; yükseklik:300 piksel; metin hizalama: merkez; renk:#FFFFFF; yazı tipi boyutu:18 piksel; üst dolgu:10 piksel; ) #içerik( arka plan:#ffffff; kenar boşluğu %30% ; height:300px; text-align:center; ) #footer( background:#3e4982; clear:her ikisi; width:100%; height:50px; text-align:center; color:#FFFFFF; font-size:14px; üst dolgu:10px; )

Blokların yüksekliği, sonucun görülebilmesi için koşullu olarak ayarlandı. Bir tarayıcıda sayfamıza bakın:

Tarayıcı penceresini yeniden boyutlandırırsanız, tüm blokların genişliği değişecektir. Bu her zaman uygun değildir, çünkü. menü bloğunu uzatırken boş bir alan belirir. Bu nedenle, "menü" bloğunun genişliği daha sık sabitlenir, hadi böyle yapalım. Bunu yapmak için, stil sayfasındaki ilgili özelliklerin değerlerini değiştirin:

... #menu( arka plan:#6173cb; kayan nokta:sol; genişlik:200 piksel; yükseklik:300 piksel; ) #içerik( arka plan:#ffffff; kenar boşluğu:200 piksel; yükseklik:300 piksel; ) ...

Artık sayfamız daha doğal bir şekilde uzanıyor. Akışkan düzende sayfalar ekranın tüm genişliğini kaplar, bu nedenle sayfa ortalamaya gerek yoktur.

Ancak dilerseniz sayfanızın ekranın sağında ve solunda eşit girintiler olmasını sağlayabilirsiniz. Bunu yapmak için, diğer tüm bloklar için bir kapsayıcı olan "ana" bloğa bir stil eklemeniz gerekir:

Şimdi sayfamız şuna benziyor:

Site düzeni ve merkezleme, sabit genişlik

Bu durumda, bloklarımızın sabit boyutlarını ayarlamamız gerekecek:

#main( width:800px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-sol:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:800px; height:50px; text-align:center; color:#FFFFFF; yazı tipi- boyut:14px; üst dolgu:10px; )

Artık sayfamız ekranın sol kenarına sabitlendi.

Bu durumda site sayfalarının merkeze hizalanması aşağıdaki gibi yapılabilir. Sayfamızın bir "gövde" etiketine sahip olduğunu ve bu etikete de genişlik ve biraz dolgu eklenebileceğini hatırlayın.

Şunu yapalım: "gövde" etiketinin genişliğini 800 piksele ("ana" blok gibi) ve sol girintiyi (dolgu-sol) %50'ye ayarlayın. Ardından "ana" bloğun tüm içeriği ekranın sağ tarafında görüntülenecektir (yani ortadan sağa doğru):

"Ana" bloğumuzun ekranın ortasında yer alması için, ortasının "body" etiketinin ortasıyla eşleşmesi gerekir. Şunlar. "ana" bloğu boyutunun yarısı kadar sola hareket ettirin. "Ana" bloğun genişliği 800 pikseldir, bu nedenle "margin-left:-400px" özelliğini ona ayarlamanız gerekir. Evet, bu özellik negatif değerler alabilir, bu durumda sol kenar boşluğu azalır (yani sola kaydırılır). Ve tam da ihtiyacımız olan şey bu.

Şimdi stil sayfası şöyle görünür:

body( width:800px; padding-left:50%; ) #main( width:800px; margin-left:-400px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center ; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; genişlik:800 piksel; yükseklik:50 piksel; metin hizalama:merkez; renk:#FFFFFF; yazı tipi boyutu:14 piksel; dolgu üstü:10 piksel; )

Ve tarayıcıdaki sayfamız tam ortada:

Sitenin sayfalarını ortalamak için iki seçenek düşündük, aslında bunlar bir dogma değil. Deneme yapabilir ve kendi sürümünüzü oluşturabilirsiniz, sadece çalışmasını farklı tarayıcılarda kontrol edin. Ne yazık ki, FireFox veya Opera'da iyi görüntülenenler IE'de tamamen anlaşılmaz olabilir ve bunun tersi de geçerlidir. Ve bu hatırlanmalıdır.

Yaratıcı arayışlarınızda iyi şanslar!

Çoğu zaman yerleşimde bazı elemanları yatay ve/veya dikey olarak ortalamak gerekir. Bu nedenle, her şeyin tek bir yerde el altında olması için çeşitli merkezleme yöntemleriyle bir makale yapmaya karar verdim.

Yatay hizalama

kenar boşluğu: otomatik

Kenar boşluğu ile yatay hizalama, ortalanmış elemanın genişliği bilindiğinde kullanılır. Blok elemanları için çalışır:

Elem (sol kenar boşluğu: otomatik; sağ kenar boşluğu: otomatik; genişlik: %50; )

Sağ ve sol dolgunun otomatik değerini belirtmek onları eşit yapar, bu da öğeyi üst blok içinde yatay olarak ortalar.

metin hizalama: orta

Bu yöntem, bir blok içindeki metni ortalamak için uygundur. metin hizalama: merkez:

soldaki konum ve negatif kenar boşluğu

Bilinen genişlikteki ortalanmış bloklar için uygundur. Ana bloğu konum: ona göre konuma göre, ortalanmış öğeyi konum: mutlak , sol: %50 ve değeri öğenin genişliğinin yarısına eşit olan bir negatif margin-left olarak ayarladık:

ekran: satır içi blok + metin hizalama: orta

Yöntem, genişliği bilinmeyen blokları hizalamak için uygundur, ancak bir üst sarmalayıcı gerektirir. Örneğin, yatay bir menüyü şu şekilde ortalayabilirsiniz:

• ev
• yazar hakkında

Dikey hizalama

satır yüksekliği

Tek bir metin satırını hizalamak için üst blok için aynı yükseklik ve satır aralığı değerlerini kullanabilirsiniz. Düğmeler, menü öğeleri vb. için uygundur.

pozisyon ve negatif marj yukarı

Bir öğe, ona sabit bir yükseklik verilerek ve konum: mutlak ve hizalanan öğenin yüksekliğinin yarısına eşit bir negatif kenar boşluğu uygulanarak dikey olarak hizalanabilir. Ana bloğa pozisyon verilmelidir: göreceli:

Sarıcı ( konum: göreli; ) öğe ( yükseklik: 200 piksel; kenar boşluğu: -100 piksel 0 0; konum: mutlak; üst: %50; )

Böylece, konumlandırma ve negatif kenar boşluklarını kullanarak öğeyi sayfada ortalayabilirsiniz.

ekran: tablo hücresi

Dikey hizalama için, öğeye bir tablo hücresine öykünmesini sağlayan display: table-cell özelliği uygulanır. Ayrıca yüksekliği ve dikey hizalamayı da ayarladık: orta. Tüm bunları dislpay: table; :

Sayfadaki bir öğeyi dinamik olarak hizalayın

CSS kullanarak bir sayfadaki öğeleri hizalamanın yollarına baktık. Şimdi jQuery uygulamasına bir göz atalım.

Sayfaya jQuery ekleyelim:

Bir öğeyi sayfada ortalamak için basit bir işlev yazmanızı öneririm, buna alignCenter() diyelim. Öğenin kendisi, işlev için bir argüman görevi görür:

İşlev alignCenter(elem) ( // buraya kodlayın )

Fonksiyonun gövdesinde, sayfa merkezinin koordinatlarını dinamik olarak hesaplayın ve sol ve üst CSS özelliklerine atayın:

işlev alignCenter(elem) ( elem.css(( sol: ($(window).width() - elem.width()) / 2 + "px", üst: ($(pencere).height() - öğe. yükseklik()) / 2 + "px" // koordinatları tetiklemek için öğeye position: absolute eklemeyi unutmayın )) )

İşlevin ilk satırında, belgenin genişliğini alırız ve ondan öğenin genişliğini çıkarırız, ikiye böleriz - bu, sayfanın yatay merkezi olacaktır. İkinci satır da aynı şeyi yapar, yalnızca dikey olarak hizalamak için yükseklikle.

İşlev hazır, DOM hazırlığı ve pencere yeniden boyutlandırma olaylarında askıda kalmaya devam ediyor:

$(function() ( // DOM hazır olduğunda merkezleme işlevini çağırın alignCenter($(elem)); // pencere yeniden boyutlandırıldığında işlevi çağırın $(window).resize(function() ( alignCenter($() elem)); )) // eleman merkezleme işlevi function alignCenter(elem) ( elem.css(( // sol ve sol üst koordinatları hesaplama: ($(window).width() - elem.width()) / 2 + "px", üst: ($(window).height() - elem.height()) / 2 + "px" )))) ))

Flexbox Uygulaması

Flexbox gibi yeni CSS3 özellikleri yavaş yavaş ana akım haline geliyor. Teknoloji, yüzer, konumlandırma vb. kullanmadan işaretleme oluşturmaya yardımcı olur. Elemanları ortalamak için de kullanılabilir. Örneğin, üst .wrapper öğesine Flexbox uygulayalım ve içeriği içeri ortalayalım:

Sarıcı ( görüntü: -webkit-box; görüntü: -moz-box; görüntü: -ms-flexbox; görüntü: -webkit-flex; görüntü: esnek; yükseklik: 500 piksel; genişlik: 500 piksel; ) .wrapper .content ( kenar boşluğu: otomatik; /* kenar boşluğu: 0 otomatik; yalnızca yatay */ /* kenar boşluğu: otomatik 0; yalnızca dikey */ )

Bu kural, öğeyi aynı anda yatay ve dikey olarak ortalar - kenar boşluğu artık yalnızca yatay hizalama için değil, aynı zamanda dikey hizalama için de çalışır. Ve bilinen genişlik/yükseklik olmadan.

alakalı kaynaklar

projeye yardım et

css,

HTML

Sanırım yerleşimle uğraşan birçoğunuz, öğeleri dikey olarak hizalama ihtiyacıyla karşılaştınız ve bir öğeyi merkeze hizalarken hangi zorlukların ortaya çıktığını biliyorsunuz.

Evet, CSS'de dikey hizalama için birçok değere sahip özel bir dikey hizalama özelliği vardır. Ancak pratikte beklendiği gibi çalışmaz. Bunu anlamaya çalışalım.

Aşağıdaki yaklaşımları karşılaştıralım. Şununla hizalama:

• tablolar,
• girinti,
• satır yüksekliği ,
• germe,
• negatif marj,
• dönüştürmek,
• sözde eleman
• esnek kutu.

Bir örnek olarak, aşağıdaki örneği göz önünde bulundurun.

Biri diğerinin içine yerleştirilmiş iki div öğesi vardır. Onlara uygun sınıfları verelim - dış ve iç .

Amaç, iç elemanı dış elemanın merkezine hizalamaktır.

Başlamak için, dış ve iç bloğun boyutlarının ne zaman olduğunu düşünün. bilinen. İç öğeye display: inline-block ve dış öğeye text-align: center ve vertical-align: orta ekleyelim.

Hizalamanın yalnızca satır içi veya satır içi blok görüntüleme moduna sahip öğeler için geçerli olduğunu unutmayın.

Kenarlıklarını görmek için blokların boyutlarını ve arka plan renklerini ayarlayalım.

Dış ( genişlik: 200 piksel; yükseklik: 200 piksel; metin hizalama: merkez; dikey hizalama: orta; arka plan rengi: #ffc; ) .inner ( ekran: satır içi blok; genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi : #fcc; )
Stilleri uyguladıktan sonra, iç bloğun yatay olarak hizalandığını ancak dikey olarak hizalanmadığını göreceğiz:
http://jsfiddle.net/c1bgfffq/

Neden oldu? Gerçek şu ki, dikey hizalama özelliği hizalamayı etkiler öğenin kendisi, içeriği değil(tablo hücrelerine uygulandığı durumlar hariç). Bu nedenle, bu özelliği dış elemana uygulamak hiçbir şey yapmadı. Ayrıca, bu özelliği iç elemana uygulamak da hiçbir şey yapmaz, çünkü satır içi bloklar komşu bloklarla dikey olarak hizalanır ve bizim durumumuzda bir satır içi bloğumuz vardır.

Bu sorunu çözmek için birkaç teknik var. Aşağıda her birine daha yakından bakalım.

Bir tablo ile hizalama

İlk akla gelen çözüm, dış bloğu tek hücreli bir tabloyla değiştirmek. Bu durumda, hizalama hücrenin içeriğine yani iç bloğa uygulanacaktır.

http://jsfiddle.net/c1bgfffq/1/

Bu çözümün bariz dezavantajı, anlambilim açısından hizalama için tabloları kullanmanın yanlış olmasıdır. İkinci dezavantaj, bir tablo oluşturmak için dış bloğun etrafına bir eleman daha eklemeniz gerektiğidir.

İlk eksi, tablo ve td etiketlerini div ile değiştirerek ve CSS'de tablo görüntüleme modunu ayarlayarak kısmen kaldırılabilir.

.outer-wrapper ( display: table; ) .outer ( display: tablo-hücresi; )
Bununla birlikte, dış blok, takip eden tüm sonuçları olan bir masa olarak kalacaktır.

Dolgu ile hizalama

İç ve dış bloğun yükseklikleri biliniyorsa, hizalama, aşağıdaki formül kullanılarak iç bloğun dikey dolgusu kullanılarak ayarlanabilir: (H dış - H iç) / 2.

Dış (yükseklik: 200px; ) .inner (yükseklik: 100px; kenar boşluğu: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Çözümün dezavantajı, her iki bloğun yüksekliklerinin bilindiği durumlarda yalnızca sınırlı sayıda uygulanabilir olmasıdır.

Satır yüksekliği ile hizalama

İç bloğun birden fazla metin satırı almaması gerektiğini biliyorsanız, line-height özelliğini kullanabilir ve dış bloğun yüksekliğine eşitleyebilirsiniz. İç bloğun içeriği ikinci satıra kaydırılmaması gerektiğinden, white-space: nowrap ve overflow: hidden kurallarının da eklenmesi önerilir.

Dış ( yükseklik: 200 piksel; satır yüksekliği: 200 piksel; ) .inner ( beyaz boşluk: nowrap; taşma: gizli; )
http://jsfiddle.net/c1bgfffq/12/

Bu teknik, iç blok için satır yüksekliği değerini geçersiz kılarsanız ve kural görüntüleme: satır içi blok ve dikey hizalama: orta eklerseniz, çok satırlı metni hizalamak için de kullanılabilir.

Dış ( yükseklik: 200 piksel; satır yüksekliği: 200 piksel; ) .inner ( satır yüksekliği: normal; görüntü: satır içi blok; dikey hizalama: orta; )
http://jsfiddle.net/c1bgfffq/15/

Bu yöntemin dezavantajı, dış bloğun yüksekliğinin bilinmesi gerektiğidir.

Streç Hizalama

Bu yöntem, dış bloğun yüksekliği bilinmediğinde, ancak iç bloğun yüksekliği bilindiğinde kullanılabilir.

Bunun için ihtiyacınız olan:

1. dış bloğa göreli konumlandırmayı ve iç bloğa mutlak konumlandırmayı ayarlayın;
2. üst: 0 ve alt: 0 kurallarını iç bloğa ekleyin, bunun sonucunda dış bloğun tüm yüksekliğine kadar uzayacaktır;
3. iç bloğun dikey dolgusu için değeri otomatik olarak ayarlayın.

.outer ( konum: göreceli; ) .inner ( yükseklik: 100 piksel; konum: mutlak; üst: 0; alt: 0; kenar boşluğu: otomatik 0; )
http://jsfiddle.net/c1bgfffq/4/

Bu tekniğin özü, uzatılmış ve kesinlikle konumlandırılmış bir blok için bir yükseklik ayarlamanın, tarayıcının, değerleri otomatik olarak ayarlanmışsa dikey dolguyu eşit oranda hesaplamasına neden olmasıdır.

Negatif kenar boşluğu ile hizalama

Bu yöntem yaygın olarak bilinir ve çok sık kullanılır. Bir önceki gibi, dış bloğun yüksekliği bilinmediğinde, ancak iç bloğun yüksekliği bilindiğinde uygulanır.

Dış bloğu göreceli konumlandırmaya ve iç bloğu mutlak konumlandırmaya ayarlamanız gerekir. Ardından, iç kutuyu dış kutunun üst kısmının yüksekliğinin yarısı kadar aşağı hareket ettirmeniz gerekir: %50 ve kendi yüksekliğinin yarısı kadar yukarı hareket ettirin: -H iç / 2.

Dış ( konum: göreli; ) .iç ( yükseklik: 100 piksel; konum: mutlak; üst: %50; kenar boşluğu: -50 piksel; )
http://jsfiddle.net/c1bgfffq/13/

Bu yöntemin dezavantajı, iç ünitenin yüksekliğinin bilinmesi gerektiğidir.

Dönüşümle hizalama

Bu yöntem bir öncekine benzer ancak iç bloğun yüksekliği bilinmediğinde uygulanabilir. Bu durumda, piksel cinsinden negatif bir dolgu ayarlamak yerine transform özelliğini kullanabilir ve translateY işlevini ve -%50 değerini kullanarak iç kutuyu yukarı kaldırabilirsiniz.

Dış ( konum: göreli; ) .inner ( konum: mutlak; üst: %50; dönüştürme: çevirY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Neden önceki yöntemde değeri yüzde olarak ayarlamak imkansızdı? Kenar boşluğu özelliğinin yüzde değerleri ana öğeye göre olduğundan, %50 değeri dış kutunun yüksekliğinin yarısına eşit olur ve iç kutuyu kendi yüksekliğinin yarısı kadar yükseltmemiz gerekir. transform özelliği tam olarak bunun içindir.

Bu yöntemin dezavantajı, dahili bloğun mutlak konumlandırmaya sahip olması durumunda uygulanamamasıdır.

Flexbox ile Hizalama

Dikey olarak hizalamanın en modern yolu, Esnek Kutu Düzeni (popüler olarak Flexbox olarak bilinir) kullanmaktır. Bu modül, öğelerin sayfadaki konumlarını esnek bir şekilde kontrol etmenizi ve onları neredeyse her yere yerleştirmenizi sağlar. Flexbox için merkez hizalama çok basit bir iştir.

Dış bloğun görüntülenecek şekilde ayarlanması gerekir: flex ve iç bloğun margin: auto olarak ayarlanması gerekir. Ve hepsi bu! Güzel. Değil mi?

Dış ( ekran: esnek; genişlik: 200 piksel; yükseklik: 200 piksel; ) .iç ( genişlik: 100 piksel; kenar boşluğu: otomatik; )
http://jsfiddle.net/c1bgfffq/14/

Bu yöntemin dezavantajı, Flexbox'ın yalnızca modern tarayıcılar tarafından desteklenmesidir.

Hangi yolu seçmeli?

Sorunun ifadesinden devam etmek gerekir:

• Metnin dikey hizalaması için dikey dolgu veya satır yüksekliği özelliğini kullanmak daha iyidir.
• Bilinen bir yüksekliğe sahip (simgeler gibi) mutlak olarak konumlandırılmış öğeler için, negatif kenar boşluğu yaklaşımı idealdir.
• Blok yüksekliğinin bilinmediği daha karmaşık durumlar için, bir sözde eleman veya transform özelliği kullanılmalıdır.
• Eh, IE'nin eski sürümlerini desteklemeniz gerekmeyecek kadar şanslıysanız, elbette Flexbox daha iyidir.

Bir sayfa düzenlerken, genellikle bir CSS yöntemiyle merkez hizalaması yapmak gerekir: örneğin, ana bloğu ortalayın. Bu sorunu çözmek için, her biri er ya da geç herhangi bir düzen tasarımcısı tarafından kullanılması gereken birkaç seçenek vardır.

Orta metin hizalaması

Çoğu zaman, dekoratif amaçlar için, metin hizalamasını merkeze ayarlamak gerekir, bu durumda CSS, düzen süresini azaltmanıza izin verir. Önceden bu, HTML öznitelikleri kullanılarak yapılırdı, ancak şimdi standart metnin stil sayfaları kullanılarak hizalanmasını gerektiriyor. Kenar boşluklarını değiştirmesi gereken blokların aksine, CSS'de metin hizalaması bir satır kullanılarak ortalanır:

• metin hizalama:merkez;

Bu özellik miras alınır ve ebeveynden tüm çocuklara aktarılır. Yalnızca metni değil, diğer öğeleri de etkiler. Bunu yapmak için, satır içi (örneğin, yayılma) veya satır içi blok (görüntüleme: blok özelliği ayarlanmış tüm bloklar) olmalıdırlar. İkinci seçenek, öğenin genişliğini ve yüksekliğini değiştirmenize, girintileri daha esnek bir şekilde ayarlamanıza da olanak tanır.

Genellikle sayfalarda, hizalama etiketin kendisine atfedilir. W3C, align niteliğini kullanımdan kaldırdığı için bu, kodu hemen geçersiz kılar. Bir sayfada kullanılması önerilmez.

Bir bloğu merkeze hizalama

Bir div'i ortalamanız gerekiyorsa, CSS'nin oldukça kullanışlı bir yolu vardır: kenar boşluklarını kullanmak. Girintiler hem blok elemanları hem de satır içi blok elemanları için ayarlanabilir. Özellik değeri 0 (dikey girintiler) ve auto (otomatik yatay girintiler) değerlerini almalıdır:

• kenar boşluğu:0 otomatik;

Şimdi bu seçenek kesinlikle geçerli olarak kabul ediliyor. Kenar boşluklarını kullanmak, görüntünün merkeze hizalanmasını ayarlamanıza da olanak tanır: bir öğenin bir sayfada konumlandırılmasıyla ilgili birçok sorunu çözmenize olanak tanır.

Bloğu sola veya sağa hizalayın

Bazen CSS merkez hizalaması gerekli değildir, ancak iki bloğu yan yana koymanız gerekir: biri sol tarafa, diğeri sağ tarafa. Bunu yapmak için, üç değerden birini alabilen bir kayan nokta özelliği vardır: sol, sağ veya hiçbiri. Diyelim ki yan yana yerleştirilmesi gereken iki bloğunuz var. Ardından kod şu şekilde olacaktır:

• .left (kayan:sol;)
• .right(yüzer:sağ)

İlk iki bloğun altına yerleştirilmesi gereken üçüncü bir blok da varsa (örneğin, bir altbilgi), o zaman clear özelliğini ayarlaması gerekir:

• .left (kayan:sol;)
• .right(yüzer:sağ)
• altbilgi (temiz:her ikisi)

Gerçek şu ki, sol ve sağ sınıflı bloklar genel akışın dışında kalıyor, yani diğer tüm öğeler hizalanmış öğelerin varlığını görmezden geliyor. clear:both özelliği, altbilginin veya başka bir bloğun akıştan düşen öğeleri görmesini sağlar ve hem sola hem de sağa sarmayı (kayan) devre dışı bırakır. Bu nedenle, örneğimizde altbilgi aşağı hareket edecektir.

Dikey hizalama

Orta hizalamayı CSS yollarında ayarlamanın yeterli olmadığı durumlar vardır, ayrıca alt bloğun dikey konumunu da değiştirmeniz gerekir. Herhangi bir satır içi veya satır içi blok öğesi, üst veya alt kenarla aynı hizada olabilir, bir üst öğenin ortasında olabilir veya isteğe bağlı bir konumda olabilir. Çoğu zaman, bloğun ortalanması gerekir, bunun için dikey hizalama özniteliği kullanılır. Diyelim ki biri diğerinin içine yerleştirilmiş iki blok var. Bu durumda, iç blok bir satır içi blok öğesidir (ekran: satır içi blok). Alt bloğu dikey olarak hizalamanız gerekir:

• üst hizalama - .child(vertical-align:top);
• orta hizalama - .child(dikey hizalama:orta);
• alt hizalama - .child(dikey hizalama:alt);

Blok düzeyindeki öğeler, metin hizalama veya dikey hizalamadan etkilenmez.

Hizalanmış bloklarla ilgili olası sorunlar

Bazen bir div'i CSS yöntemiyle ortalamak küçük sorunlara neden olabilir. Örneğin, float kullanırken: diyelim ki üç blok var: .first, .second ve . Third. İkinci ve üçüncü bloklar birincide bulunur. İkinci sınıfa sahip öğe sola hizalanır ve son blok sağa hizalanır. Hizalamadan sonra ikisi de akıştan düştü. Ana öğenin bir yükseklik ayarı yoksa (örneğin, 30em), artık alt blokların yüksekliğine kadar uzanmayacaktır. Bu hatayı önlemek için, bir "aralayıcı" kullanırlar - .second ve . Third'ü gören özel bir blok. CSS kodu:

• .saniye(kayan:sol)
• .üçüncü(kayan:sağ)
• .clearfix(yükseklik:0; temizle: her ikisi;)

:after sözde sınıfı sıklıkla kullanılır, bu da bir sözde aralayıcı oluşturarak blokları tekrar yerine koymanıza izin verir (örnekte, konteyner sınıfına sahip div .first'in içindedir ve .left ve .right'ı içerir):

• .left(kayan:sol)
• .right(yüzer:sağ)
• .container:after(içerik:""; görüntü:tablo; clear:her ikisi;)

Birkaç varyasyon olmasına rağmen, yukarıdaki seçenekler en yaygın olanlarıdır. Deneme yoluyla bir sözde ayırıcı oluşturmanın en kolay ve en uygun yolunu her zaman bulabilirsiniz.

Düzen tasarımcılarının sıklıkla karşılaştığı bir diğer sorun, satır içi blok öğelerinin hizalanmasıdır. Her birinin arkasına otomatik olarak bir boşluk eklenir. Negatif bir marj olarak ayarlanan margin özelliği, bununla başa çıkmaya yardımcı olur. Çok daha az kullanılan başka yollar da vardır: örneğin, sıfırlama Bu durumda, ana öğenin özelliklerine font-size:0 yazılır. Blokların içinde metin varsa, gerekli yazı tipi boyutu satır içi blok öğelerinin özelliklerinde zaten döndürülür. Örneğin, yazı tipi boyutu:1em. Yöntem her zaman uygun değildir, bu nedenle harici girintili seçenek çok daha sık kullanılır.

Blokları hizalamak, güzel ve işlevsel sayfalar oluşturmanıza olanak tanır: bu, genel düzenin düzeni, çevrimiçi mağazalardaki malların konumu ve bir kartvizit sitesindeki fotoğraflardır.