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.

Metni ortala hizala

Çoğu zaman, dekoratif amaçlar için, metin hizalamasını merkeze ayarlamanız gerekir, bu durumda CSS, dizgi süresini azaltmanıza olanak tanır. Önceden bu, HTML öznitelikleri kullanılarak yapılırdı, ancak şimdi standart, stil sayfalarını kullanarak metin hizalamasını gerektiriyor. Kenar boşluklarını değiştirmeniz gereken kutuların aksine, CSS'de metnin orta hizalaması tek bir satırla yapılır:

• metin hizalama: merkez;

Bu özellik miras alınır ve ebeveynden tüm torunlara 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. Bu, align niteliği W3C tarafından kullanımdan kaldırıldığı için kodu hemen geçersiz kılar. Sayfada kullanılması önerilmez.

Bir bloğu merkeze hizalama

Div'i ortalanacak şekilde ayarlamanız gerekiyorsa, CSS oldukça kullanışlı bir yol sunabilir: 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 özel seçenek kesinlikle geçerli olarak kabul ediliyor. Dış girintilerin kullanılması ayrıca görüntünün merkez hizalamasını ayarlamanıza da olanak tanır: bir öğenin sayfada konumlandırılmasıyla ilgili birçok sorunu çözmenize olanak tanır.

Bir bloğu sola veya sağa hizalayın

Bazen CSS merkezli hizalama gerekli değildir, ancak iki bloğu yan yana yerleştirmeniz gerekir: biri solda, diğeri sağda. Bunu yapmak için, üç değerden birini alabilen float ö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 (yüzer: sol;)
• .right (yüzer: sağ)

Ayrıca ilk iki bloğun altına yerleştirilmesi gereken üçüncü bir blok varsa (örneğin bir altbilgi), o zaman clear özelliğini kaydetmesi gerekir:

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

Gerçek şu ki, sol ve sağ sınıflara sahip 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ış dışı öğeleri görmesine izin verir ve hem sola hem de sağa kayan noktalara izin vermez. Bu nedenle, örneğimizde altbilgi aşağı hareket edecektir.

Dikey hizalama

CSS yöntemlerini kullanarak merkez hizalamasını ayarlamanın yeterli olmadığı zamanlar 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 kenara, ana öğenin ortasına veya herhangi bir yere sabitlenebilir. Çoğu zaman, bloğun merkezde hizalanması gerekir, bunun için dikey hizalama özelliğ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 (dikey hizalama: üst);
• merkez hizalama - .child (dikey hizalama: orta);
• alt hizalama - .child (dikey hizalama: alt);

Metin hizalama veya dikey hizalama, blok öğelerini etkilemez.

Hizalanmış bloklarla ilgili olası sorunlar

Bazen bir div'i merkeze CSS tarzında hizalamak küçük sorunlara neden olabilir. Örneğin, float kullanırken: diyelim ki üç blok var: .first, .second ve . Third. İkinci ve üçüncü bloklar birincidedir. İ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 belirli bir yüksekliği yoksa (örneğin, 30em), alt blokların yüksekliği boyunca gerilmeyi durduracaktır. Bu hatayı önlemek için, bir "aralayıcı" kullanın - .ikinci ve .üçüncüyü gören özel bir blok. CSS kodu:

• .saniye (kayan: sol)
• .üçüncü (yüzer: 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 düzen oluşturarak blokları tekrar yerine koymanıza olanak tanır (örnekte, bir kap sınıfına sahip bir div .first içinde bulunur ve .left ve .right öğelerini içerir):

• .left (yüzer: sol)
• .right (yüzer: sağ)
• .container: after (içerik: ""; ekran: tablo; temizle: ikisi de;)

Birkaç varyasyon olmasına rağmen, yukarıdaki seçenekler en yaygın olanlarıdır. Deneme yoluyla sahte bir düzen 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 yöntemler de 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 dış 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 ve çevrimiçi mağazalardaki malların konumu ve bir kartvizit sitesindeki fotoğraflardır.

Elemanların yatay ve dikey hizalanması farklı şekillerde yapılabilir. Yöntem seçimi, elemanın tipine (blok veya satır içi), konumlandırma tipine, boyutlarına 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, bunun display:block;

1.2. Blok başka bir blokta yuvalanmışsa ve bunun için genişlik ayarlanmamış/ayarlanmamışsa:

.wrapper (metin hizalama: orta;)

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

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

1.4. Bloklar için genişlik belirtilmemişse, üst sarmalayıcı bloğu kullanarak ortalayabilirsiniz:

.wrapper (metin hizalama: merkez; / * bloğun içeriğini merkeze yerleştirin * /) .box (ekran: satır içi blok; / * blokları yatay olarak sıralayın * / kenar boşluğu: -0.25em ; / * bloklar arasındaki sağ girintiyi kaldırın * /)

2. Dikey hizalama

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

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

2.2. Bir üst blok içinde bir bloğu dikey olarak hizalamak için:

.wrapper (konum: göreli;) .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 (ekran: tablo; genişlik: %100;) .box (ekran: tablo hücresi; yükseklik: 100 piksel; metin hizalama: merkez; dikey hizalama: orta;)

2.4. Bir bloğun genişliği ve yüksekliği varsa ve ana blokta ortalanması gerekiyorsa:

.wrapper (konum: göreceli;) .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; / * ile içerik sürünmedi * /)

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

eleman boyutlandırılmışsa

div (genişlik: 300 piksel; / * blok genişliğini ayarlayın * / yükseklik: 100 piksel; / * blok yüksekliğini ayarlayın * / transform: translate (-50%, -%50); konum: mutlak; üst: %50; sol: %50 ;)

eleman boyutlandırılmamışsa ve boş değilse

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

Ç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 dolgu için otomatik değerin belirtilmesi, bunları eşit hale getirir, bu da öğeyi üst blok içinde yatay olarak ortalar.

metin hizalama: orta

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

soldaki konum ve negatif kenar boşluğu

Bilinen genişlikteki ortalanmış bloklar için uygundur. Ana bloğa pozisyonunu veririz: ona göre pozisyona göre, ortalanmış eleman pozisyon: mutlak, sol: %50 ve elemanın genişliğinin yarısı olan negatif bir sol kenar boşluğudur:

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

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

• ev
• yazar hakkında

Dikey hizalama

satır yüksekliği

Bir metin satırını hizalamak için, üst blok için aynı yükseklik ve satır aralığını kullanabilirsiniz. Düğmeler, menü öğeleri ve daha fazlası için uygundur.

pozisyon ve negatif marj yukarı

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

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 özelliğine sahip bir kapta saracağız: tablo; :

Sayfadaki bir öğeyi dinamik olarak hizalama

CSS kullanarak bir sayfadaki öğeleri hizalamanın yollarını inceledik. Şimdi jQuery varyantının uygulanmasına bir göz atalım.

Sayfaya jQuery ekleyelim:

Sayfada bir öğeyi 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, sayfanın merkezinin koordinatlarını dinamik olarak hesaplar ve CSS sol ve üst özelliklerine asarız:

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

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

İşlev hazır, DOM'a hazır ve pencere yeniden boyutlandırma olaylarına asmak için kalır:

$ (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 $ (pencere) .resize (function () (alignCenter ($ () elem));)) // öğeyi ortalamak için işlev function alignCenter (elem) (elem.css ((// sol ve üst koordinatların hesaplanması: ($ (pencere) .width () - elem.width ()) / 2 + "px", üst: ($ (pencere) .height () - elem.height ()) / 2 + "px")))))

Flexbox'ı kullanma

CSS3'ün Flexbox gibi yeni özellikleri yavaş yavaş günlük rutinin bir parçası haline geliyor. Teknoloji, şamandıralar, konumlandırma vb. kullanmadan düzen oluşturmaya yardımcı olur. Elemanları ortalamak için de kullanılabilir. Örneğin, üst .wrapper üzerinde flexbox kullanalım ve içeriği içeri ortalayalım:

Sarmalayı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 olarak * / / * kenar boşluğu: otomatik 0; yalnızca dikey olarak * /)

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 bir genişlik / yükseklik olmadan.

alakalı kaynaklar

projeye yardım et

Sanırım düzeni yapan 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, dikey hizalama için CSS'nin birden çok değere sahip özel bir dikey hizalama özelliği vardır. Ancak pratikte hiç de beklendiği gibi çalışmıyor. Anlamaya çalışalım.

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

• tablolar,
• girintiler,
• 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 vardır. Onlara uygun sınıfları verelim - dış ve iç.

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

Başlangıç ​​olarak, dış ve iç ünitelerin boyutlarının bilinen... İç öğeye display: inline-block ve dış öğeye text-align: center ve vertical-align: Middle'ı ekleyelim.

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

Kenarlarını görmek için blok boyutlarını ve arka plan renklerini verelim.

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? Mesele şu ki, dikey hizalama özelliği hizalamayı etkiler öğenin kendisi, içeriği değil(tablo hücreleri için geçerli olduğu durumlar hariç). Bu nedenle, bu özelliği harici bir öğeye uygulamak hiçbir şey yapmadı. Ayrıca, bu özelliği bir iç elemana uygulamak da hiçbir şey yapmaz, çünkü satır içi bloklar bitişik bloklara göre 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 bakacağız.

Bir tabloyla hizalayın

Akla gelen ilk çözüm, dış bloğu tek hücreli bir masa ile 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, tabloyu oluşturmak için dış bloğun etrafına başka bir eleman 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 (ekran: tablo;) .outer (ekran: tablo hücresi;)
Bununla birlikte, dış blok, takip eden tüm sonuçları olan bir masa olarak kalacaktır.

Girintilerle hizala

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

Dış (yükseklik: 200 piksel;) .iç (yükseklik: 100 piksel; kenar boşluğu: 50 piksel 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ı içermemesi 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, boşluk: nowrap ve overflow: gizli 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 tekniği, iç blok için satır yüksekliği değerini yeniden tanımlayarak ve display: satır içi blok ve dikey hizalama: orta kurallar ekleyerek çok satırlı metni hizalamak için de kullanabilirsiniz.

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ış ünitenin yüksekliği bilinmediğinde ancak iç ünitenin yüksekliği bilindiğinde kullanılabilir.

Bunun için ihtiyacınız olan:

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

.outer (konum: göreli;) .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 kutunun yüksekliğini belirtmenin, otomatik olarak ayarlandığında tarayıcıyı dikey kenar boşluklarını eşit oranlarda hesaplamaya zorlaması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ış blok göreli konumlandırmayı ve iç bloğu - mutlak olarak ayarlamanız gerekir. Ardından, iç kutuyu dış kutunun üst kısmının yüksekliğinin yarısı kadar aşağı itmeniz gerekir: %50 ve kendi yüksekliğinin yarısı kadar yukarı kaldırmanız gerekir. -H iç / 2.

Dış (konum: göreli;) .inner (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ç ünitenin yüksekliği bilinmediğinde uygulanabilir. Bu durumda, bir negatif piksel dolgusu ayarlamak yerine transform özelliğini kullanabilir ve translateY işlevini ve -%50 değerini kullanarak iç bloğu yukarı taşıyabilirsiniz.

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

Önceki yöntemde neden bir yüzde ayarlanamadı? Marjin özelliğinin yüzde değerleri ebeveyne göre hesaplandığından, %50'lik bir değer dış kutunun yüksekliğinin yarısı olur ve iç kutuyu kendi yüksekliğinin yarısı kadar yükseltmemiz gerekiyordu. Bunun için transform özelliği doğru.

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

Flexbox ile hizalayın

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ı neredeyse istediğiniz gibi yerleştirerek esnek bir şekilde kontrol etmenizi sağlar. Flexbox için merkez hizalama çok basit bir iştir.

Dış kutunun görüntülenecek şekilde ayarlanması gerekir: flex ve iç kutunun kenar boşluğu: otomatik olarak ayarlanması gerekir. Ve hepsi bu! Güzel. Değil mi?

Dış (ekran: esnek; genişlik: 200 piksel; yükseklik: 200 piksel;) .inner (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 margin-top özelliği idealdir.
• Daha karmaşık durumlar için, bloğun yüksekliği bilinmediğinde, bir sözde eleman veya transform özelliği kullanmanız gerekir.
• IE tarayıcısının eski sürümlerini desteklemeniz gerekmeyecek kadar şanslıysanız, elbette Flexbox kullanmak daha iyidir.

Etiketler: Etiket Ekle

Merhaba! HTML dilinin temellerini öğrenmeye devam ediyoruz. Metni ortaya, genişliğe veya kenarlara hizalamak için ne yazmanız gerektiğini görelim.

İşe başlarken, HTML'de ortalanmış metni üç farklı şekilde nasıl yapacağımıza bakalım. Son ikisi doğrudan stil sayfasıyla ilgilidir. Site sayfalarına bağlanan ve görünümlerini belirleyen bir CSS dosyası olabilir.

Yöntem 1 - doğrudan HTML ile çalışma

Aslında, her şey oldukça basittir. Aşağıdaki örneğe bakın.

Paragrafın orta hizalaması.

Metin parçalarını farklı bir şekilde kaydırmanız gerekirse, "center" parametresi yerine aşağıdaki değerleri yazın:

• yasla - metnin sayfanın genişliğine göre hizalanması;
• sağ - sağa hizalı;
• sol sol.

Benzer şekilde, başlıklarda (h1, h2), kapsayıcıda (div) bulunan içeriği taşıyabilirsiniz.

Yöntem 2 ve 3 - stilleri kullanma

Yukarıda sunulan tasarım biraz dönüştürülebilir. Etkisi aynı olacaktır. Bunu yapmak için aşağıdaki kodu kaydetmeniz gerekir.

Metin bloğu.

Bu nedenle, metin içeriğini ortalamak için kod doğrudan HTML'ye yazılır.

Bir sonuca ulaşmanın alternatif bir yolu da vardır. Birkaç adım yapmanız gerekecek.

Adım 1. Ana koda şunu yazın

Metin malzemesi.

Adım 2. Dahil edilen CSS dosyasına aşağıdaki kodu girin:

Rovno (metin hizalama: orta;)

"Rovno" kelimesinin sadece farklı şekilde çağrılabilecek bir sınıfın adı olduğuna dikkat edin. Bu, programcının takdirine bırakılmıştır.

HTML'de benzetme yaparak, metni kolayca merkez, genişlik ve sayfanın sağına veya soluna hizalayabilirsiniz. Gördüğünüz gibi, hedefe ulaşmak için tek bir seçenek yok.

Sadece birkaç soru:

• Bilgilendirici, ticari olmayan bir proje mi yapıyorsunuz?
• Sitenizin arama motorlarında üst sıralarda çıkmasını ister misiniz?
• İnternetten gelir elde etmek ister misiniz?

Tüm cevaplar olumluysa, web sitesi geliştirmeye yönelik entegre bir yaklaşıma bakın. Bilgiler, özellikle bir WordPress CMS tarafından destekleniyorsa yardımcı olacaktır.

Kendi sitelerinizin internette pasif veya aktif gelir elde etmek için birçok seçenekten sadece biri olduğunu belirtmek isterim. Blogum sadece web'deki finansal fırsatlarla ilgili.

Uzaktan çalışırken ana veya ek gelir getiren trafik arbitrajı, metin yazarlığı ve diğer faaliyet alanlarında hiç çalıştınız mı? Bu ve daha fazlasını şu anda blogumun sayfalarında bulabilirsiniz.

İleride gerçekten çok faydalı bilgiler yayınlayacağım. İletişimde kalın. Dilerseniz Workip güncellemelerine e-posta ile abone olabilirsiniz. Abonelik formu aşağıdadır.