Sayfa nasıl ortalanır. CSS'de öğelerin yatay ve dikey hizalanması
Bugünün makalesi, bir div'i hem yatay hem de dikey olarak ortalamak için birkaç CSS hilesini nasıl kullanacağınızı göstermeyi amaçlıyor. Ayrıca tüm sayfayı veya tek bir div öğesini nasıl ortalayacağınızı da göstereceğiz.
Bir DIV öğesinin bir sayfada basit bir şekilde ortalanması
Bu yöntem tüm tarayıcılarda sorunsuz çalışacaktır.
css
Merkez-div ( kenar boşluğu: 0 otomatik; genişlik: 100 piksel; )
Örnek
margin özelliğindeki auto değeri, sol ve sağ dolguyu sayfada bulunan tüm alana ayarlar. Burada hatırlanması gereken önemli şey, ortalanmış div'in genişliğinin ayarlanmış olması gerektiğidir.
Bir DIV öğesinin içinde bir DIV'yi eski yöntemle ortalamak
Bu merkez div yöntemi tüm tarayıcılarda çalışacaktır.
css
Dış div ( dolgu: 30px; ) .inner-div ( kenar boşluğu: 0 otomatik; genişlik: 100 piksel; )
HTML
Örnek
Dış div istediğiniz gibi konumlandırılabilir, ancak iç div belirtilen bir genişliğe sahip olmalıdır ( Genişlik).
Satır içi blok ile bir DIV öğesinin içinde bir DIV'yi ortalamak
Bir div'i bir div içinde ortalamak için kullanılan bu yöntemde, iç öğenin genişliğini belirtmek gerekli değildir. IE8 dahil tüm modern tarayıcılarda çalışacaktır.
css
Dış div ( dolgu: 30px; metin hizalama: merkez; ) .inner-div ( ekran: satır içi blok; dolgu: 50 piksel; )
HTML
Örnek
text-align özelliği yalnızca satır içi öğelerde çalışır. Satır içi blok değeri, iç div'in bir satır içi öğenin yanı sıra bir blok ( satır içi blok). Dış div üzerindeki text-align özelliği, iç div'i ortalamamıza izin verecektir.
Bir DIV öğesinin içinde bir DIV'yi yatay ve dikey olarak ortalamak
Burada marj: otomatik, div'i sayfanın ortasına ortalamak için kullanılır. Örnek, tüm modern tarayıcılarda çalışacaktır.
css
Dış div ( dolgu: 30px; ) .inner-div ( kenar boşluğu: otomatik; genişlik: 100 piksel; yükseklik: 100 piksel; )
HTML
Örnek
İç div bir genişliğe sahip olmalıdır ( Genişlik) ve yükseklik ( yükseklik). Dış div sabit bir yüksekliğe sahipse yöntem çalışmaz.
Bir DIV'yi sayfanın altında ortalamak
Burada, marjin: otomatik, div'i dikey olarak ortalamak için kullanılır ve dış öğe için mutlak konumlandırma kullanılır. Yöntem, tüm modern tarayıcılarda çalışacaktır.
css
Dış div ( konum: mutlak; alt: 30 piksel; genişlik: %100; ) .inner-div ( kenar boşluğu: 0 otomatik; genişlik: 100 piksel; yükseklik: 100 piksel; arka plan rengi: #ccc; )
HTML
Örnek
İç div bir genişlik ayarına sahip olmalıdır. Sayfanın altındaki boşluk, dış div'in alt özelliği kullanılarak ayarlanır. Ayrıca, alt özelliği üst özellik ile değiştirerek div'i sayfanın üst kısmında ortalayabilirsiniz.
Bir DIV'yi sayfada dikey ve yatay olarak ortalama
Burada, div'i merkeze hizalamak için, margin: auto tekrar kullanılır ve dış div mutlak olarak konumlandırılır. Yöntem, tüm modern tarayıcılarda çalışacaktır.
css
Merkez-div ( konum: mutlak; kenar boşluğu: otomatik; üst: 0; sağ: 0; alt: 0; sol: 0; genişlik: 100 piksel; yükseklik: 100 piksel; )
Örnek
div öğesi bir genişlik kümesine sahip olmalıdır ( Genişlik) ve yükseklik ( yükseklik).
Bir DIV öğesinin bir sayfada duyarlı olarak ortalanması
Burada, div'i CSS ile ortalamak için div öğesinin genişliğini, pencerenin yeniden boyutlandırılmasına yanıt verecek şekilde duyarlı hale getiriyoruz. Bu yöntem tüm tarayıcılarda çalışır.
css
Merkez-div ( kenar boşluğu: 0 otomatik; maksimum genişlik: 700 piksel; )
Örnek
Ortalanmış div'in maksimum genişlik özelliği ayarlanmış olmalıdır.
İç blok özelliklerini kullanarak bir DIV'yi bir elemanın içinde ortalamak
İç div burada yanıt veriyor. Bir div'i bir div içinde ortalamak için kullanılan bu yöntem, tüm tarayıcılarda çalışacaktır.
css
Dış div ( dolgu: 30px; ) .inner-div ( marj: 0 otomatik; maksimum genişlik: 700 piksel; )
HTML
Örnek
İç div'in max-width özelliği ayarlanmış olmalıdır.
İki duyarlı div'i yan yana ortalamak
Burada yan yana iki duyarlı div var. Div'i ekranda ortalamanın bu yöntemi tüm modern tarayıcılarda çalışacaktır.
css
Container ( text-align: center; ) .left-div ( display: inline-block; max-width: 300px; Vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) ekran ve (maks-genişlik: 600px) ( .left-div, .right-div ( lef maks-genişlik: %100; ) )
HTML
Örnek
Burada, ortalanmış bir kap içinde uygulanan inline-block özelliğine sahip birkaç öğemiz var. Bu örnek ayrıca CSS ortam sorgularını kullanır; yani ekran boyutu 600 pikselden küçükse, hem sol hem de sağ div'ler için max-width özelliği %100 olarak ayarlanır.
Flexbox ile ortalanmış DIV öğesi
Burada Flexbox kullanarak CSS div'ini ortalıyoruz. Kullanıcı arayüzü tasarım sürecini kolaylaştırmak amaçlanmıştır. Bu eklenti Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ ve Android Tarayıcı 40+ tarafından desteklenmektedir.
css
Container ( display: flex; align-items: center; justify-content: center; height: 100vh; ) .item ( background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; )
Sevgili okuyucu, bugün blokta dikey hizalama problemini ele alacağız. div.
Harika CSS özelliğinin varlığını muhtemelen zaten biliyorsunuzdur. dikey hizalama. Ve Tanrı'nın kendisi bize bu özelliği dikey hizalama için kullanmamızı emretti (bu kadar açıklayıcı bir isim taşıması boşuna değildir).
Sorunun formülasyonu: Değişken yükseklik bloğunun içeriğini dikeye göre merkezde hizalamak gerekir.
Şimdi sorunu çözmeye başlayalım.
Ve böylece bir bloğumuz var, yüksekliği değişebilir:
Akla gelen ilk şey, aşağıdaki numarayı yapmaktır:
Bu ifadeye inanmak için her türlü neden var. İçeriği engelle kapsayıcı div'in merkez yüksekliğine hizalanacaktır.
Ama orada değildi! Bu şekilde beklenen herhangi bir merkez hizalamasını elde edemeyiz. Ve neden? Her şey doğru görünüyordu. Görünüşe göre burada yakalama: özellik dikey hizalama yalnızca tablo hücrelerinin içeriğini hizalamak veya satır içi öğeleri birbirine göre hizalamak için kullanılabilir.
Tablo hücresinin içindeki hizalamaya gelince, bence her şey açık. Ancak satır içi öğelerle başka bir durumu açıklayacağım.
Satır içi öğelerin dikey hizalaması
Satır içi etiketlerle ayrılmış bir metin satırınız olduğunu varsayalım. parçalara:
Sen memnuniyetle karşılıyor parça metin!
Satır içi etiket, görünümü içeriğin yeni bir satıra kaydırılmasına neden olmayan bir kapsayıcıdır.
Blok etiketinin eylemi, kabın içeriğinin yeni bir satıra aktarılmasına yol açar.
bir blok etiketidir. Metin parçalarını bloklar içine alırsak, sonra her biri yeni bir satırda olacak. etiketi kullanma , aksine, satır içi, kapsayıcıların yeni bir satıra sarılması olmayacak, tüm kapsayıcılar aynı çizgide kal.Konteyner metnin bir bölümünü özel biçimlendirme ile ayarlarken (renkle vurgulama, farklı bir yazı tipinde vb.) kullanmak uygundur.
Konteynerler için aşağıdaki CSS özelliklerini uygulayın:
#perviy( dikey hizalama:alt; ) #vtoroy( dikey hizalama:3px; ) #tretiy( dikey hizalama:-3px; )
Sonuç olarak, metin satırı şöyle görünecektir:
Bu, satır içi öğelerin dikey hizalanmasından ve CSS özelliğinden başka bir şey değildir. dikey hizalama bu görevle mükemmel bir şekilde başa çıkıyor.
Biraz konudan sapıyoruz, şimdi asıl görevimize dönüyoruz.
Bir div kabında dikey hizalama
Ne olursa olsun, div kabının içinde hizalamak için bu özelliği kullanacağız. dikey hizalama. Dediğim gibi, bu özellik satır içi öğelerin hizalanması durumunda kullanılabilir (bu durumu yukarıda ayrıntılı olarak tartıştık ve bir div kapsayıcısında hizalama için bize uygun değil); sadece şu gerçeği kullanmak için kalır: dikey hizalama tablo hücreleri için çalışır.
Nasıl kullanabiliriz? Tablomuz yok, div container ile çalışıyoruz.
Ha, çok basit olduğu ortaya çıktı.
CSS özelliği görüntülemek div bloğumuzu bir tablo hücresine dönüştürmenize izin verir, bu kolayca ve doğal bir şekilde yapılabilir:
Bir sınıf div'imiz olsun Metin hizalama:
İçeriği engelleBu blok için aşağıdaki CSS özelliğini belirtin:
Textalign(ekran: tablo hücresi; )
Bu CSS talimatı, div bloğumuzu görsel olarak hiçbir şekilde değiştirmeden mucizevi bir şekilde bir tablo hücresine dönüştürecek. Ve bir tablo hücresi için özelliği uygulayabiliriz. dikey hizalama tamamen ve istenen dikey merkezleme çalışacaktır.
Ancak, her şey bu kadar basit bitemez. Ayrıca harika bir IE tarayıcımız var. Mülkle nasıl çalışılacağını bilmiyor ekran: tablo hücresi(htmlbook.ru sitesindeki farklı tarayıcılarda bu CSS özelliğinin performansını gösteren tabloya aşina olmanızı öneririm). Bu nedenle, çeşitli numaralara gitmemiz gerekecek.
Tüm tarayıcılar için bir div kapsayıcısında uyum sağlamanın birçok yolu vardır:
- Ek bir yardımcı div kabı kullanan yöntem
- İfade kullanan yöntem. Blok yüksekliklerinin kurnazca hesaplanmasıyla bağlantılıdır. JavaScript bilgisi olmadan yapamazsınız.
- Line-height özelliğini kullanma. Bu yöntem sadece yüksekliği bilinen bir blokta dikey hizalama için uygundur ve bu nedenle genel durumda uygulanamaz.
- IE tarayıcısı durumunda mutlak ve göreli içerik ofsetini kullanma. Bu yöntem bana en anlaşılır ve basit görünüyor. Ayrıca, değişken yükseklikte bir div kabı için uygulanabilir. Bunun üzerinde daha ayrıntılı olarak duracağız.
Anladığınız gibi, mülkün yanlış anlaşılmasıyla ilişkili IE'deki dikey hizalama sorununu çözmemiz gerekiyor. ekran: tablo hücresi(ne IE6 ne IE7 ne de IE8 bu özelliğe aşina değiller). Bu nedenle, kullanarak koşullu yorumözellikle IE ailesinin tarayıcıları için diğer CSS özelliklerini belirteceğiz.
Koşullu Yorum
Tasarımı görüntüle:
... Инструкции, действующие только в случае выполнения условия в квадратных скобках...
koşullu yorum olarak adlandırılır (dikkatli olun, koşullu yorumun türü verilen örnekle bir boşluk kadar tamamen eşleşmelidir).
Böyle bir koşullu yorumda yer alan talimatlar, yalnızca verilen kodu yorumlayan tarayıcı IE ailesine aitse yürütülür.
Böylece, koşullu bir yorum kullanarak, bir kod parçasını IE dışındaki tüm tarayıcılardan gizleyebiliriz.
sorunun çözümü
Tüm bu maydanoz nedeniyle, HTML kodumuza iki ek kapsayıcı sağlamamız gerekecek. Metin içeren bloğumuz şöyle görünecek:
Bir tür deneme metni.
İki satırdan oluşur.Sınıf kapsayıcı div için Metin hizalamaİçeriğini tüm normal tarayıcılar için dikey olarak hizalayan CSS özellikleri ayarlanmıştır (tabii ki IE hariç):
Ekran: tablo hücresi; dikey hizalama: orta;
Ve bloğun genişliğini ve yüksekliğini ayarlayan iki özellik daha:
Genişlik:500 piksel; yükseklik: 500 piksel;
Bu, tüm tarayıcılarda merkezdeki kabın içeriğini dikeye göre hizalamak için oldukça yeterlidir. IE hariç.
Şimdi hizalama ile ilgili özellikleri eklemeye başlıyoruz. IE ailesi tarayıcıları için(onlar için ek bloklar kullandık div Ve açıklık):
Etikete atıfta bulunmak div sınıf bloğunun içinde Metin hizalama. Bunu yapmak için önce sınıfın adını ve ardından bahsettiğimiz etiketi bir boşlukla ayırarak belirtmeniz gerekir.
Textalign div( konum: mutlak; üst: %50; )
Bu yapı şu anlama gelir: sınıfla birlikte blok içindeki tüm div etiketleri için Metin hizalama listelenen özellikleri uygulayın.
Buna göre, blok için ayarlanan stiller Metin hizalama değiştirilmiş:
Textalign( ekran: tablo hücresi; dikey hizalama: orta; genişlik:500 piksel; yükseklik: 500 piksel; konum: göreli; )
Artık metin kutusunun sol üst noktası %50 aşağı kaydırılmıştır.
Neler olduğunu açıklamak için bir örnek çizdim:
Resimden de görebileceğiniz gibi, biraz ilerleme kaydettik. Ama hepsi bu değil! Sarı bloğun sol üst noktası gerçekten de üst (mor) bloktan %50 aşağı hareket etmiştir. Ama ihtiyacımız olan şey, mor bloğun yüksekliğinin yüzde ellisinin sarı blok merkezi, sol üst noktası değil.
Şimdi etiket gidecek açıklık ve göreceli konumu:
Metin hizalama aralığı( konum: göreli; üst: -%50; )
Böylece sarı bloğu ilk konumuna göre yüksekliğinin %50'si kadar yukarı kaydırmış olduk. Anladığınız gibi, sarı bloğun yüksekliği ortalanmış içeriğin yüksekliğine eşittir. Son span işlemi ise içeriğimizi mor kutunun ortasına yerleştiriyor. Yaşasın!
Biraz Şaman Olalım
Öncelikle maydanozu tüm normal tarayıcılardan gizlememiz ve IE için açmamız gerekiyor. Bu, elbette şartlı bir yorumun yardımıyla yapılabilir, onu tanımamız boşuna değildi:
Küçük bir problem var. Ortalanan içerik çok yüksekse, bu hoş olmayan sonuçlara yol açar: fazladan bir dikey kaydırma yüksekliği vardır.
Problemin çözümü:özelliğin eklenmesi gerekiyor taşma: gizli blok Metin hizalama.
Mülkü ayrıntılı olarak tanıyın taşma içinde mümkündür.
Blok için CSS talimatlarının son görünümü Metin hizalamaşuna benziyor:
Textalign( ekran: tablo hücresi; dikey hizalama: orta; genişlik:500 piksel; yükseklik: 500 piksel; konum: göreli; taşma: gizli; kenarlık: 1 piksel düz siyah; )
Üzgünüm, önemli bir noktayı söylemeyi unuttum. Eğer denemeye devam edersen sınıf bloğunun yüksekliğini ayarla Metin hizalama yüzde olarak, o zaman sahipsin ondan bir şey çıkmaz.
Değişken Yükseklik Bloğunda Merkezleme
Çoğu zaman sınıf bloğunun yüksekliğini ayarlama ihtiyacı vardır. Metin hizalama piksel cinsinden değil, ana bloğun yüksekliğinin yüzdesi olarak ve div kabının içeriğini ortaya hizalayın.
İşin püf noktası, bunu bir tablo hücresi (ve sınıf bloğu) için yapmanın imkansız olmasıdır. Metin hizalamaözelliği sayesinde masa hücresine dönüşür. ekran:tablo hücresi).
Bu durumda, CSS özelliğinin belirtildiği dış bloğu kullanmanız gerekir. ekran:tablo ve zaten yüksekliğin yüzde değerini ayarlamak için. Daha sonra blok, CSS direktifi ile iç içe geçmiştir. ekran:tablo hücresi, üst bloğun yüksekliğini memnuniyetle devralır.
Örneğimizde değişken yükseklikli bir blok uygulamak için CSS'yi biraz düzenleyeceğiz:
sınıf Metin hizalama mülkün değerini değiştireceğiz görüntülemekİle masa hücresi Açık masa ve hizalama yönergesini kaldırın dikey hizalama: orta. Artık yükseklik değerini 500 pikselden örneğin %100'e güvenle değiştirebiliriz.
Yani sınıf bloğu için CSS özellikleri Metin hizalamaşöyle görünecek:
Textalign( ekran: tablo; genişlik:500 piksel; yükseklik: %100; konum: göreli; taşma: gizli; kenarlık: 1 piksel düz siyah; )
Geriye içerik merkezlemeyi uygulamak kalır. Bunu yapmak için, sınıf bloğunda yuvalanmış div kabı Metin hizalama(bu, şekildeki aynı sarı bloktur), CSS özelliğini ayarlamanız gerekir ekran:tablo hücresi, ardından ana bloktan %100'lük bir yükseklik devralır Metin hizalama(mor blok). Ve hiçbir şey, iç içe geçmiş div kabının içeriğini özellik ile merkeze hizalamamızı engelleyemez. dikey hizalama: orta.
Kapsayıcıya yerleştirilmiş div için başka bir ek CSS özellikleri listesi alma Metin hizalama.
Textalign div( ekran: tablo hücresi; dikey hizalama: orta; )
Bütün numara bu. İsteğe bağlı olarak, ortalanmış içerik ile yüksekliği değiştirebilirsiniz.
Değişken yükseklikte bir bloğun dikey hizalaması hakkında daha fazla bilgi için, bkz.
Elemanları yatay ve dikey olarak hizalamak çeşitli şekillerde yapılabilir. Yöntem seçimi, öğenin türüne (blok veya satır içi), konumlandırma türüne, boyutuna vb. bağlıdır.
1. Bloğun / sayfanın merkezine yatay hizalama
1.1. Bloğun bir genişliği varsa:
div (genişlik: 300 piksel; kenar boşluğu: 0 otomatik; /*öğeyi üst blok içinde yatay olarak ortala*/)Bir satır içi öğeyi bu şekilde hizalamak istiyorsanız, onu şu şekilde ayarlamanız gerekir: blok;
1.2. Bir blok başka bir bloğun içinde yuvalanmışsa ve onun için ayarlanmış genişlik/genişliği yoksa:
.wrapper(text-align:center;)1.3. Bloğun bir genişliği varsa ve ana bloğun ortasına sabitlenmesi gerekiyorsa:
.wrapper (konum: göreli; /*ana kutuyu göreli konuma ayarla, böylece kutuyu daha sonra içine kesinlikle yerleştirebiliriz*/) .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ır*/ )1.4. Bloklar için genişlik ayarlanmamışsa, ana sarmalayıcı bloğu kullanarak ortalayabilirsiniz:
.wrapper (text-align: center; /*blok içeriğini ortala*/) bloklar arasında girinti*/ )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 üst blok içinde 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 tipine 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. 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ü kullanılarak sayfanın/bloğun merkezine mutlak konumlandırma:
elemanın boyutları varsa
div (genişlik: 300px; /*blok genişliğini ayarla*/ height:100px; /*blok yüksekliğini ayarla*/ transform: translate(-50%, -50%)); konum: mutlak; üst: %50; sol: %50 ;)
öğenin boyutları yoksa ve boş değilse
h1 ( marj: 0; dönüştürme: çevir(-50%, -50%); konum: mutlak; üst: %50; sol: %50; )Burada biraz metin
Web tasarımcıları işte her gün DIV'leri kullanır. Abartmadan, bu en popüler etikettir. Herhangi bir sitenin kaynağını açın ve nesnelerin üçte ikisinin olmasa da çoğunun içine alındığını göreceksiniz.
. HTML5'in ortaya çıkışına ve makale veya başlık biçiminde ciddi rakiplerin ortaya çıkmasına rağmen, her yerde işaretlemeye eklenmeye devam ediyor. Bu nedenle, div bloklarını merkezde biçimlendirme ve hizalama konusunu ele almanızı öneririm.DIV nedir?
Öğenin adı, bölme anlamına gelen İngilizce bölme kelimesinden gelir. İşaretleme yazarken, öğeleri bloklara ayırmak için kullanılır. DIV'ler, bir web sayfasındaki içerik gruplarını içine alır. Örneğin resimler, metin içeren paragraflar. Etiket, içeriğin görüntülenmesini hiçbir şekilde etkilemez ve herhangi bir anlamsal yük taşımaz.
DIV, tüm genel öznitelikleri destekler. Ancak web tasarımı için yalnızca ikisine ihtiyacınız vardır - bir sınıf ve bir kimlik. Geri kalan her şeyi yalnızca egzotik durumlarda hatırlayacaksınız ve bu bir gerçek değil. Eskiden bir div'i ortalamak veya sola hizalamak için kullanılan align özelliği kullanımdan kaldırılmıştır.
DIV'ler ne zaman kullanılır?
Sitenin bir buzdolabı olduğunu ve DIV'lerin içeriği sıralamanız gereken plastik kaplar olduğunu hayal edin. Ciğer sucuğu ile meyveyi aynı kaba koymazsınız. Koyduğunuz her çeşit ürün ayrı ayrı. Web içeriği de benzer şekilde oluşturulur.
Herhangi bir siteyi açın ve anlamsal bloklara bölün. Başlık üstte, alt bilgi altta, ana metin ortada. Yan tarafta, genellikle tanıtım içeriği veya etiket bulutu içeren daha küçük bir sütun bulunur.
belge Şimdi her bölümü daha ayrıntılı olarak sökün. Başlık ile başlayın. Site başlığında ayrı bir logo, gezinme, birinci düzey başlık ve bazen bir slogan bulunur. Her semantik bloğa kendi kapsayıcınızı atayın. Bu, yalnızca akıştaki öğeleri ayırmakla kalmayacak, aynı zamanda biçimlendirmeyi de kolaylaştıracaktır. Nesneye bir sınıf veya kimlik vererek DIV etiketinde ortalamanız çok daha kolay olacaktır.
DIV'yi Kenar Boşluklarıyla Ortaya Hizala
Web öğelerini işlerken, tarayıcı üç özelliği dikkate alır: dolgu, kenar boşluğu ve kenarlık. dolgu, içerik ile kenarlığı arasındaki boşluktur. Kenar boşluğu - bir nesneyi diğerinden ayıran alanlar. Sınır, bloklar boyunca uzanan çizgilerdir. Hepsinden veya yalnızca bir taraftan aynı anda atanabilirler:
div( kenarlık: 1px katı #333; sol kenarlık: yok; )Bu özellikler, nesneler arasına boş alan ekler ve ayrıca bunların istendiği gibi hizalanıp yerleştirilmesine yardımcı olur. Örneğin, resimli bir bloğun sol kenardan merkeze %20 kaydırılması gerekiyorsa, öğeye %20 değerinde bir sol kenar boşluğu atarsınız:
Resimli blok( sol kenar boşluğu: %20; )
Öğeler, genişlik değerleri ve negatif dolgu kullanılarak da biçimlendirilebilir. Örneğin, 200px'e 200px boyutlarında bir blok var. İlk olarak, ona mutlak bir konum atayın ve %50 merkeze taşıyın.
Div( konum: mutlak; sol: %50; )
Şimdi, DIV'nin mükemmel bir şekilde ortalandığından emin olmak için, ona genişliğinin %50'sine eşit, yani -100 piksele eşit bir negatif sol dolgu verin:
sol kenar boşluğu: -100px
CSS'de buna "hava giderme" denir. Ancak, çeşitli iç içe geçme seviyelerine sahip elemanlar için yapılması oldukça zor olan sürekli hesaplamalar yapma ihtiyacında önemli bir dezavantajı vardır. Dolgu ve kenarlık genişliği ayarlanırsa, tarayıcı varsayılan olarak kabın boyutlarını kenarlıkların genişliği, sağdaki, soldaki dolgu ve içindeki içeriğin toplamı olarak hesaplayacaktır; bir sürpriz.
Bu nedenle, bir DIV'yi ortalamanız gerektiğinde, border-box değeriyle box-sizing özelliğini kullanın. Tarayıcının, DIV öğesinin toplam genişliğine dolgu ve kenarlık değeri eklemesini engeller. Bir öğeyi yükseltmek veya alçaltmak için negatif değerler de kullanın. Ancak bu durumda, kabın üst veya alt alanına atanabilirler.
Otomatik kenar boşluklarını kullanarak div bloğu nasıl ortalanır
Bu, büyük blokları ortalamanın kolay bir yoludur. Konteynerin genişliğini ve marj özelliğini otomatik olarak ayarlamanız yeterlidir. Tarayıcı bloğu ortaya, solda ve sağda aynı kenar boşlukları olacak şekilde yerleştirecek ve tüm işi kendi başına yapacaktır. Sonuç olarak, matematiksel hesaplamalarda kafanızın karışması riskini almaz ve zamandan önemli ölçüde tasarruf edersiniz.
Duyarlı uygulamalar geliştirirken otomatik kenar boşluğu yöntemini kullanın. Anahtar, kaba ems veya yüzde cinsinden bir genişlik değeri vermektir. Yukarıdaki kod DIV'yi ortalayacak ve cep telefonları da dahil olmak üzere herhangi bir cihazda ekranın %90'ını kaplayacaktır.
Özellik ekranı üzerinden hizalama: satır içi blok
Varsayılan olarak, DIV öğeleri blok öğeleri olarak kabul edilir ve blok görüntü değerine sahiptir. Bu yöntem için, bu özelliği geçersiz kılmanız gerekecek. Yalnızca üst kapsayıcısı olan DIV'ler için uygundur:
herhangi bir metinouter-div sınıfına sahip bir öğeye, içindeki metni ortalayan center değerine sahip bir text-align özelliği atanır. Ancak şimdilik, tarayıcı iç içe geçmiş DIV'yi bir blok nesnesi olarak görüyor. text-align özelliğinin çalışması için inner-div satır içi olarak ele alınmalıdır. Böylece, iç div seçici için CSS'de aşağıdaki kodu yazarsınız:
İç div( ekran: satır içi blok; )
Display özelliğini bloktan satır içi bloğa değiştirirsiniz.
dönüştürme/çeviri yöntemi
Basamaklı Stil Sayfaları, web öğelerini istediğiniz zaman taşımanıza, eğmenize, döndürmenize ve dönüştürmenize olanak tanır. Bunun için transform özelliği kullanılır. İstenilen dönüşüm türü ve derecesi değer olarak belirtilir. Bu örnekte çeviri ile çalışacağız:
dönüştür: tercüme et(%50, %50);Translate işlevi, bir öğeyi geçerli konumundan sola/sağa ve yukarı/aşağı taşır. Parantez içinde iki değer iletilir:
- yatay hareket derecesi;
- dikey hareket derecesi.
Elemanın yalnızca koordinat eksenlerinden biri boyunca taşınması gerekiyorsa, çeviri sözcüğünden sonra eksenin adını ve parantez içinde gerekli kaydırma miktarını belirtirsiniz:
Dönüştür: öteleY(-20%);
Bazı kılavuzlarda, satıcı önekleriyle dönüşümü görebilirsiniz:
webkit-dönüşüm: çeviri(%50, %50); -ms-transform: çeviri(%50, %50); dönüştür: tercüme et(%50, %50);
2018'de bu artık gerekli değil, özellik Edge ve IE dahil tüm tarayıcılar tarafından destekleniyor.
İhtiyacımız olan DIV'yi ortalamak için translate CSS fonksiyonu dikey ve yatay eksenler için %50 değeri ile yazılır. Bu, tarayıcının öğeyi mevcut konumundan genişliğinin ve yüksekliğinin yarısına taşımasına neden olur. Genişlik ve yükseklik özellikleri belirtilmelidir:
belge transform özelliğinin uygulandığı öğenin, etrafındaki nesnelerden bağımsız olarak hareket ettiğini unutmayın. Bir yandan, bu uygundur, ancak bazen hareket eden DIV, başka bir kapsayıcının üzerine binebilir. Bu nedenle, ağ bileşenlerini merkezleme yöntemi standart dışı kabul edilir ve yalnızca çok gerekli durumlarda kullanılır. Animasyon için tüm CSS kanonlarına göre dönüşümler kullanılır.
Flexbox düzeniyle çalışma
Flexbox, web düzenlerini düzenlemenin karmaşık bir yolu olarak kabul edilir. Ama ustalaşırsanız standart formatlama yöntemlerinden çok daha basit ve zevkli olduğunu anlayacaksınız. Flexbox özelliği, öğeleri işlemek için esnek ve inanılmaz derecede güçlü bir yoldur. Modülün adı İngilizce'den "esnek kapsayıcı" olarak çevrilmiştir. Genişlik, yükseklik, öğelerin düzeni değerleri, girintiler ve kenar boşlukları hesaplanmadan otomatik olarak ayarlanır.
Önceki örneklerde, display özelliğiyle zaten çalıştık, ancak bunu blok (blok) ve satır içi (satır içi blok) değerlere ayarladık. Esnek düzenler oluşturmak için display: flex kullanacağız. İlk önce esnek bir kaba ihtiyacımız var:
Basamaklı tablolarda onu esnek bir kapsayıcıya dönüştürmek için şunu yazarız:
Flex-container( ekran: flex; )
İçinde yuvalanmış tüm nesneler, ancak yalnızca doğrudan alt öğeler, esnek öğeler olacaktır:
BirinciSaniyeÜçüncüDördüncüBir esnek kapsayıcı içine bir liste yerleştirilirse, li listesindeki öğeler esnek öğeler olarak kabul edilmez. Flexbox düzeni yalnızca ul üzerinde çalışır:
Esnek öğeleri yerleştirme kuralları
Esnek öğeleri yönetmek için, içeriği yasla ve hizala öğelerine ihtiyacınız var. Belirttiğiniz değerlere bağlı olarak bu iki özellik, nesneleri gerektiği gibi otomatik olarak konumlandırır. Tüm iç içe geçmiş DIV'leri ortalamamız gerekirse, justify-content: center, align-items: center yazıyoruz ve başka bir şey yazmıyoruz. Tarayıcı işin geri kalanını yapacak:
belge BirinciSaniyeÜçüncüDördüncüEsnek öğeler olan DIV'lerde metni ortalamak için standart metin hizalama hilesini kullanabilirsiniz. Ya da iç içe geçmiş her bir DIV'yi esnek bir kapsayıcı yapabilir ve içeriği justify-content ile yönetebilirsiniz. Bu yöntem, grafikler, çok düzeyli listeler dahil diğer iç içe geçmiş nesneler dahil olmak üzere çeşitli içerikler içeriyorsa çok daha rasyoneldir.
Her düzen tasarımcısı, sürekli olarak bir bloktaki içeriği yatay veya dikey olarak hizalama ihtiyacıyla karşı karşıya kalır. Bu konuda birkaç iyi makale var, ancak hepsi birçok ilginç, ancak birkaç pratik seçenek sunuyor, bu yüzden ana şeyi vurgulamak için fazladan zaman harcamanız gerekiyor. Artık google'da aramamak için bu bilgileri benim için uygun olan biçimde sunmaya karar verdim.
Blokları Bilinen Boyutlarla Hizalama
CSS kullanmanın en kolay yolu, önceden belirlenmiş bir yüksekliğe (dikey hizalama için) veya genişliğe (yatay hizalama için) sahip kutuları hizalamaktır.
Dolgu ile hizalama
Bazen bir öğeyi ortalayamazsınız, ancak " özelliğiyle ona kenarlıklar ekleyebilirsiniz. dolgu malzemesi".
Örneğin 200'e 200 piksel bir resim var ve onu 240'a 300'lük bir blokta ortalamak istiyoruz. Dış bloğun yüksekliğini ve genişliğini = 200px olarak ayarlayabilir ve üste ve alta 20 piksel ekleyebilir ve Sağda ve solda 50.
.example-wrapper1 ( arka plan : #535E73 ; genişlik : 200 piksel ; yükseklik : 200 piksel ; dolgu : 20 piksel 50 piksel ; )Kesinlikle Konumlandırılmış Blokları Hizalama
Blok " olarak ayarlanmışsa pozisyon: mutlak", daha sonra "position:relatif" ile en yakın ebeveyne göre konumlandırılabilir. Bunun için tüm özellikler (" tepe","Sağ","alt","sol") aynı değeri atamak için iç bloğun yanı sıra "margin: auto".
*Bir nüans var: İç bloğun genişliği (yüksekliği) + solun değeri (sağ, alt, üst) ana bloğun boyutunu geçmemelidir. Sol (sağ, alt, üst) özelliklerini 0 (sıfır) olarak ayarlamak daha güvenlidir.
.example-wrapper2 ( konum : göreli ; yükseklik : 250 piksel ; arka plan : url(boşluk.jpg) ; ) 0 ; sağ : 0 ; kenar boşluğu : otomatik ; arka plan : url(king.png) ; )Yatay hizalama
"text-align: center" ile hizalama
Metni bir blokta hizalamak için özel bir özellik vardır " Metin hizalama" olarak ayarlandığında merkez" metnin her satırı yatay olarak hizalanacaktır. Çok satırlı metin için bu çözüm nadiren kullanılır, daha çok bu seçenek açıklıkları, bağlantıları veya resimleri hizalamak için bulunabilir.
Bir keresinde, metin hizalamanın CSS ile nasıl çalıştığını göstermek için bir metin bulmam gerekti, ancak aklıma ilginç bir şey gelmedi. İlk başta bir yere bir tekerleme kopyalamaya karar verdim ama bunun makalenin özgünlüğünü bozabileceğini ve sevgili okuyucularımızın onu Google'da bulamayacağını hatırladım. Ve sonra bu paragrafı buraya yazmaya karar verdim - sonuçta mesele onunla değil, mesele aynı hizada.
.example-text (metin hizalama: merkez; dolgu: 10 piksel; arka plan: #FF90B8;)Bu özelliğin yalnızca metin için değil, aynı zamanda herhangi bir satır içi öğe için ("ekran: satır içi") çalışacağını belirtmekte fayda var.
Ancak bu metin sola hizalıdır, ancak sarıcıya göre ortalanmış bir blok içindedir.
.example-wrapper3 ( metin hizalama : merkez ; arka plan : #FF90B8 ; ) .inline-text ( görüntüleme : satır içi blok ; genişlik : %40 ; dolgu : 10 piksel ; metin hizalama : sol; arka plan : #FFE5E5 ; )Blokları kenar boşluklarıyla hizalama
Bilinen bir genişliğe sahip blok seviyesindeki öğeler, "margin-left: auto; margin-right: auto" olarak ayarlanarak kolayca yatay olarak hizalanır. Kısaltma genellikle kullanılır: " kenar boşluğu: 0 otomatik" (sıfır yerine herhangi bir değer olabilir). Ancak dikey hizalama için bu yöntem çalışmaz.
.lama-sarmalayıcı ( yükseklik : 200 piksel ; arka plan : #F1BF88 ; ) .lama1 ( yükseklik : 200 piksel ; genişlik : 200 piksel ; arka plan : url(lama.jpg) ; kenar boşluğu : 0 otomatik ; )Bu, mümkün olduğunda (sabit veya mutlak konumlandırmanın gerekli olmadığı durumlarda) tüm blokları hizalamaya değer - en mantıklı ve yeterli olanıdır. Bu bariz görünse de, zaman zaman olumsuz girintiler içeren göz korkutucu örnekler gördüm, bu yüzden açıklığa kavuşturmam gerektiğini düşündüm.
Dikey hizalama
Dikey hizalamayla ilgili çok daha fazla sorun var - görünüşe göre bu, CSS'de sağlanmadı. İstenilen sonuca ulaşmanın birkaç yolu var ama hepsi çok güzel değil.
line-height özelliğiyle hizalama
Blokta yalnızca bir satır olması durumunda, dikey hizalamasını " satır yüksekliği" ve istenen yüksekliğe ayarlama. Güvende olmak için, değeri "satır yüksekliği" değerine eşit olacak "yüksekliği" de ayarlamalısınız, çünkü ikincisi tüm tarayıcılarda desteklenmez.
.example-wrapper4 ( satır yüksekliği : 100 piksel ; renk : #DC09C0 ; arka plan : #E5DAE1 ; yükseklik : 100 piksel ; metin hizalama : orta ; )Bir bloğu birden çok satırla hizalamak da mümkündür. Bunu yapmak için ek bir sarma bloğu kullanmanız ve satır yüksekliğini buna ayarlamanız gerekir. İç blok çok satırlı olabilir, ancak "satır içi" olmalıdır. Buna "vertical-align: mid" uygulamanız gerekir.
.example-wrapper5 ( satır yüksekliği : 160 piksel ; yükseklik : 160 piksel ; yazı tipi boyutu : 0 ; arka plan : #FF9B00 ; ) 1.5 ; dikey hizalama : orta ; arka plan : #FFFAF2 ; renk : #FF9B00 ; metin hizalama : orta ;)Sarma bloğunda "font-size: 0" ayarlanmış olmalıdır. Yazı tipi boyutunu sıfıra ayarlamazsanız, tarayıcı kendisinden fazladan birkaç piksel ekleyecektir. Ayrıca, iç blok için yazı tipi boyutunu ve satır yüksekliğini belirtmeniz gerekecektir, çünkü bu özellikler ebeveynden devralınmıştır.
Tablolarda dikey hizalama
Mülk " dikey hizalama" aynı zamanda tablo hücrelerini de etkiler. Değer "orta" olarak ayarlandığında, hücre içindeki içerik ortalanır. Elbette, tablo düzeni günümüzde arkaik olarak kabul edilir, ancak istisnai durumlarda " belirtilerek simüle edilebilir. ekran: tablo hücresi".
Bu seçeneği genellikle dikey hizalama için kullanırım. Aşağıda, hazır bir projeden alınan bir yerleşim düzeni örneği bulunmaktadır. İlgi çekici olan bu şekilde dikey olarak ortalanmış resimdir.
.one_product .img_wrapper (ekran : tablo hücresi ; yükseklik : 169 piksel ; dikey hizalama : orta ; taşma : gizli ; arka plan : #fff ; genişlik : 255 piksel ; ) .one_product img ( maksimum yükseklik : 169 piksel ; maksimum genişlik : 100 % ; minimum genişlik : 140 piksel ; görüntüleme : blok ; kenar boşluğu : 0 otomatik ; )Unutulmamalıdır ki, öğenin "hiçbiri" dışında bir "kayan nokta" ayarı varsa, o zaman yine de blok şeklinde olacaktır (ekran: blok) - o zaman ek bir blok sarıcı kullanmanız gerekecektir.
Ek bir satır içi öğeyle hizalama
Ve satır içi öğeler için uygulayabilirsiniz " dikey hizalama: orta". Bu durumda, " ile tüm öğeler ekran: satır içi" aynı çizgide olanlar ortak bir merkez çizgisiyle hizalanacaktır.
Ana bloğun yüksekliğine eşit yükseklikte bir yardımcı blok oluşturmanız gerekir, ardından istenen blok ortalanacaktır. Bunun için pseudo-elements:before veya:after kullanmak uygundur.
.example-wrapper6 ( yükseklik : 300 piksel ; text-align : center ; arka plan : #70DAF1 ; ) .pudge ( display : satır içi blok ; dikey hizalama : orta ; arka plan : url(pudge.png) ; arka plan rengi : # fff ; genişlik : 200 piksel ; yükseklik : 200 piksel ; ) .riki ( görüntüleme : satır içi blok ; yükseklik : %100 ; dikey hizalama : orta ; )Ekran: esnetme ve hizalama
Explorer 8 kullanıcılarını pek umursamıyorsanız veya onlar için fazladan bir javascript parçası koyacak kadar umursuyorsanız, "display: flex" kullanılabilir. Esnek kutular, hizalama sorunlarını gerçekten iyi bir şekilde ele alır ve içindeki içeriği ortalamak için "kenar boşluğu: otomatik" yazmak yeterlidir.
Şimdiye kadar, bu yöntem neredeyse hiç tanışmadım, ancak bunun için özel bir kısıtlama yok.
.example-wrapper7 (ekran : esnek ; yükseklik : 300 piksel ; arka plan : #AEB96A ; ) .example-wrapper7 img ( kenar boşluğu : otomatik ; )
CSS hizalaması hakkında yazmak istediğim tek şey bu. Artık içeriği ortalamak sorun olmayacak!
