Kişiler

Sayfanın ortasındaki div. Bir DIV Öğesini Ortalamaya Yönelik Eksiksiz Kılavuz

  • 15.10.2019

Vlad Merjeviç

Tablo hücrelerinin içeriğinin aynı anda yatay ve dikey olarak hizalanabilmesi nedeniyle, elemanların birbirlerine göre konumlarını kontrol etme olanakları genişletilir. Tablolar, resimlerin, metnin, form alanlarının ve diğer öğelerin birbirine ve bir bütün olarak web sayfasına göre hizalamasını ayarlamanıza olanak tanır. Genel olarak, hizalama temel olarak farklı öğeler arasında görsel bir bağlantı kurmak ve bunları gruplandırmak için gereklidir.

Dikey merkezleme

Ziyaretçiye sitenin odağını ve başlığını göstermenin bir yolu, bir açılış sayfası kullanmaktır. Bu, kural olarak, sitenin ana fikrini ifade eden bir flash-intro veya bir resmin bulunduğu ilk sayfadır. Resim ayrıca sitenin diğer bölümlerine bir bağlantıdır. Bu resmin, monitör çözünürlüğünden bağımsız olarak tarayıcı penceresinin ortasına yerleştirilmesi gerekir. Bunun için genişliği ve yüksekliği %100 olan bir tablo kullanabilirsiniz (örnek 1).

Örnek 1: Bir resmi ortalama

hizalama



Bu örnekte, yatay hizalama, align="center" etiket parametresi kullanılarak ayarlanır. , ve bu konum varsayılan olarak ayarlandığından hücre içeriğinin dikey olarak ortalanması gerekmez.

Tablo yüksekliğini %100'e ayarlamak için,, kod artık geçerli değil.

Web sayfasının mevcut tüm alanı için genişlik ve yüksekliğin kullanılması, boyutu ne olursa olsun, tablonun içeriğinin kesinlikle tarayıcı penceresinin ortasına hizalanmasını sağlar.

Yatay hizalama

Etiketin align (yatay hizalama) ve valign (dikey hizalama) niteliklerini birleştirerek , birbirine göre çeşitli tipte eleman konumlarının ayarlanmasına izin verilir. Şek. 1, öğelerin yatay olarak nasıl hizalanacağını gösterir.

Aşağıdaki şekle göre bazı metin hizalama örneklerine bakalım.

Üst hizalama

Etiket için hücre içeriğinin en üste hizalamasını belirtmek için valign niteliğini top değeriyle ayarlamak gerekir (örnek 2).

Örnek 2: valign kullanma

hizalama

Sütun 1 2. sütun


Bu örnekte hücre özellikleri, etiket parametreleri kullanılarak kontrol edilir. , ancak stiller arasında değişiklik yapmak da daha uygundur. Özellikle hücre hizalaması, dikey hizalama ve metin hizalama özellikleriyle belirlenir (örnek 3).

Örnek 3: Hizalama için stilleri uygulayın

hizalama

Sütun 1 2. sütun


Kodu kısaltmak için bu örnek, dikey hizalama ve dolgu özellikleri aynı anda iki hücreye uygulandığından seçici gruplamayı kullanır.

Alt hizalama aynı şekilde yapılır, ancak üst yerine alt kullanılır.

Merkez hizalama

Varsayılan olarak, bir hücrenin içeriği dikeylerinin ortasına hizalanır, bu nedenle farklı sütun yükseklikleri olması durumunda hizalamanın en üste ayarlanması gerekir. Bazen, örneğin Şekil 2'de gösterildiği gibi formülleri yerleştirirken orijinal hizalama yöntemini bırakmanız gerekir. 2.

Bu durumda, formül kesinlikle tarayıcı penceresinin ortasında bulunur ve numarası sağ kenardadır. Böyle bir eleman düzenlemesi için üç hücreli bir tabloya ihtiyacınız var. Aşırı hücreler aynı boyuta sahip olmalıdır, orta hücrede hizalama merkezde ve sağ hücrede - sağ kenarda yapılır (örnek 4). Formülün ortalandığından emin olmak için bu hücre sayısı gereklidir.

Örnek 4: Formül Hizalama

hizalama

(18.6)


Bu örnekte, tablonun ilk hücresi boş bırakılmıştır, yalnızca bu arada stiller kullanılarak da ayarlanabilen bir girinti oluşturmaya yarar.

Form öğelerini hizalama

Tablolar, özellikle metinle serpiştirildiklerinde, form alanlarını konumlandırmak için kullanışlıdır. Yorum girmek için tasarlanan formun tasarım seçeneklerinden biri Şekil 2'de gösterilmektedir. 3.

Form alanlarının yakınındaki metnin sağa hizalanması ve form öğelerinin kendisinin sola hizalanması için, görünmez kenarlıklı ve iki sütunlu bir tabloya ihtiyacınız vardır. Sol sütun metnin kendisini, sağ sütun ise metin alanlarını içerecektir (örnek 5).

Örnek 5 Form Alanlarını Hizalama

hizalama

İsim
E-posta
Yorum


Bu örnekte, sağa hizalama gerektiren hücreler için align="right" özniteliği eklenmiştir. "Yorum" etiketinin çok satırlı metnin üst sınırında yer alması için, ilgili hücre valign özniteliği kullanılarak üste hizalı olarak ayarlanır.

İyi günler, bu yayının aboneleri ve okuyucuları. Bugün ayrıntılara girmek ve size metni css'de nasıl ortalayacağınızı anlatmak istiyorum. Daha önceki bazı makalelerde dolaylı olarak bu konuya değinmiştim, bu alanda biraz bilginiz olsun.

Bununla birlikte, bu yazıda size nesneleri hizalamanın her türlü yolunu anlatacağım, ayrıca paragrafları nasıl girintili ve kırmızı çizgili yapacağınızı açıklayacağım. Öyleyse öğrenmeye başlayalım!

Html ve yavruları
ve hizalamak

Bu yöntem, basamaklı stil sayfası araçları tarafından değiştirildiği için neredeyse hiç kullanılmaz. Ancak böyle bir etiketin var olduğunu bilmek size zarar vermez.

Doğrulama ile ilgili olarak (bu terim "" makalesinde ayrıntılı olarak açıklanmıştır), html spesifikasyonunun kendisi kullanımını kınamaktadır. < merkez>, geçerlilik için geçişli kullanmak gerektiğinden BELGE TİPİ>.

Bu tipyasak öğeleri atlar.

MERKEZ



Şimdi özniteliğe geçelim hizalamak. Nesnelerin yatay hizalamasını belirler ve etiket bildiriminden sonra sığar. Genellikle içeriği sola hizalamak için kullanılabilir ( ayrıldı), sağ tarafta ( Sağ), ortalanmış ( merkez) ve metin genişliği ( savunmak).

Aşağıda resim ve paragrafı ortasına yerleştireceğim bir örnek vereceğim.

hizalamak

Bu içerik ortalanacaktır.



Resim için ayrıştırdığımız özniteliğin biraz farklı değerlere sahip olduğunu unutmayın.

Kullandığım örnekte hizala="orta". Bu sayede resim hizalanır, böylece cümle tam olarak resmin ortasına yerleştirilir.

CSS merkezleme araçları

Blokları, metinleri ve grafik içeriğini hizalamak için tasarlanmış CSS özellikleri çok daha sık kullanılır. Bu öncelikle uygulama stillerinin rahatlığı ve esnekliğinden kaynaklanmaktadır.

Öyleyse, metin ortalamanın ilk özelliğiyle başlayalım - bu Metin-hizalamak.

Hizalama ile aynı işlevi görür. Anahtar kelimeler arasından, genel listeden birini seçebilir veya ataların özelliklerini devralabilirsiniz ( miras).

Css3'te 2 parametre daha ayarlayabileceğinizi belirtmek isterim: Başlat– metni yazma kurallarına bağlı olarak (sağdan sola veya tam tersi), hizalamayı sola veya sağa ayarlar (sol veya sağın çalışmasına benzer) ve son- başlangıcın tersi (metni soldan sağa yazarken sağdan, sağdan sola yazarken - sola gibi davranır).

Metin hizalama

Sağdaki teklif

son ile cümle



Size küçük bir hileden bahsedeyim. Bir değer seçerken savunmak son satır aşağıdan çirkin asılabilir. Örneğin, merkeze yerleştirmek için mülkü kullanabilirsiniz. metin hizalama-son.

Site içeriğini veya tablo hücrelerini dikey olarak hizalamak için özelliği kullanın. dikey hizalama. Aşağıda elementin ana anahtar kelimelerini açıkladım.

anahtar kelime amaç
temel Temel olarak adlandırılan üst satıra hizalamayı belirtir. Ata nesnenin böyle bir çizgisi yoksa, alt sınır boyunca hizalama gerçekleşir.
orta Değişken nesnenin ortası, ana öğenin yükseklik tabanının eklendiği taban çizgisine hizalanır.
alt Seçilen içeriğin alt kısmı, hepsinin altındaki nesnenin alt kısmına göre ayarlanır.
tepe Alttakine benzer, yalnızca nesnenin üstüyle.
Süper Bir karakter üst simgesi yapar.
alt Öğeyi alt simge yapar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 dikey hizalama
C AT E TÖİle


dikey hizalama

C AT E TÖİle


Girinti

Ve son olarak paragraftaki girintiye ulaştık. CSS dili, adı verilen özel bir özellik kullanır. metin girintisi.

Bununla birlikte, hem kırmızı bir çizgi hem de bir çıkıntı yapabilirsiniz (negatif bir değer belirtmeniz gerekir).

metin girintisi

Kırmızı bir çizgi oluşturmak için yalnızca bir parametreyi bilmeniz gerekir.

Basit bir metin girintisi özelliğidir.



Her örneği pratikte deneyenleri takdir ediyorum. Bloguma linkleri arkadaşlarınıza gönderin ve abone olmayı unutmayın. İyi şanlar! Güle güle!

Saygılarımla, Roman Chueshov

Okumak: 675 kez

Yazardan: Blog sayfalarımıza tekrar hoş geldiniz. Bugünkü yazımda hem bloklara hem de içeriklerine uygulanabilecek çeşitli hizalama tekniklerinden bahsetmek istiyorum. Özellikle, metin hizalamasının yanı sıra css'de blokların nasıl hizalanacağı.

Blokları merkeze hizalayın

Bir bloğu css'de ortalamak kolaydır. Bu, birçokları için en ünlü tekniktir, ancak hemen şimdi bundan bahsetmek istiyorum, her şeyden önce. Bunun ana öğeye göre yatay olarak ortalanması amaçlanmıştır. Nasıl gerçekleştirilir? Diyelim ki bir konteynerimiz var ve test konumuzun içinde:

< div id = "wrapper" >

< div id = "header" > < / div >

< / div >

Diyelim ki bu sitenin başlığı. Pencerenin tüm genişliğini kaplamıyor ve onu ortalamamız gerekiyor. Şöyle yazıyoruz:

#başlık(

genişlik / maksimum genişlik : 800 piksel ;

kenar boşluğu : 0 otomatik ;

Tam veya maksimum genişliği belirtmemiz ve ardından anahtar özelliğini yazmamız gerekiyor - margin: 0 auto. Başlığımızın kenar boşluklarını belirler, ilk değer üstten ve alttan kenar boşluklarını belirler ve ikincisi - sağa ve sola. Otomatik değer, tarayıcıya, öğenin ana öğe üzerinde tam olarak ortalanması için her iki taraftaki dolguyu otomatik olarak hesaplamasını söyler. Rahat!

Metin hizalama

Bu da çok basit bir hiledir. Tüm satır içi öğeleri hizalamak için, metin hizalama özelliğini ve değerlerini kullanabilirsiniz: sol, sağ, orta. İkincisi, metni ortalar, ki bu bizim istediğimiz şeydir. Bir resim bile aynı şekilde hizalanabilir, çünkü o da varsayılan olarak bir satır içi öğedir.

Metni dikey olarak hizala

Ama bu zaten daha zor. Varsayılan olarak, metni bir blok kapsayıcısında dikey olarak kolayca ortalayacak böyle basit, iyi bilinen bir özellik yoktur. Ancak, yerleşim tasarımcılarının yıllar içinde ortaya çıkardığı birkaç püf noktası var.

Dolgu kullanarak blok yüksekliğini ayarlayın. Yol, yükseklik ile kesin bir yükseklik belirlemek değil, aynı olması gereken üst ve alt dolgularla yapay olarak oluşturmaktır. Herhangi bir blok oluşturalım ve ona aşağıdaki özellikleri yazalım:

div( arka plan: #ccc; dolgu: 30 piksel 0; )

div (

arka plan : #ccc;

dolgu : 30 piksel 0 ;

Arka plan sadece kenarları ve dolguyu görsel olarak görmek içindir. Şimdi bloğun yüksekliği bu iki girintiden ve satırın kendisinden oluşuyor ve hepsi şöyle görünüyor:

Blok için bir satır yüksekliği tanımlayın. Bana öyle geliyor ki, bir metin satırını hizalamanız gerekiyorsa, bu daha doğru bir yol. Bununla, height özelliğini kullanarak normal yüksekliği kaydedebilirsiniz. Bundan sonra, bir bütün olarak bloğun yüksekliği ile aynı olan çizginin yüksekliğini de ayarlaması gerekir.

div(yükseklik: 60 piksel; satır yüksekliği: 60 piksel; )

div (

yükseklik: 60 piksel

satır yüksekliği: 60 piksel;

Sonuç yukarıdaki resme benzer olacaktır. Dolgu ekleseniz bile her şey işe yarayacaktır. Ancak, sadece bir satır için. Bir öğede daha fazla metne ihtiyacınız varsa, bu yöntem çalışmayacaktır.

Bloğu tablo hücresine dönüştürün. Bu yöntemin özü, dikey hizalama: orta özelliğin, öğeyi dikey olarak ortalayan tablo hücresine etki etmesidir. Buna göre, bu durumda, blok aşağıdaki şekilde ayarlanmalıdır:

div( görüntü: tablo hücresi; dikey hizalama: orta; )

div (

ekran : tablo - hücre ;

dikey hizalama : orta ;

Bu yöntemle ilgili güzel olan şey, istediğiniz kadar metni ortalayabilmenizdir. Ancak display: table öğesini div'imizin yuvalandığı bloğa ayarlamak daha iyidir, aksi takdirde çalışmayabilir.

İşte bugünün son numarasına geliyoruz - bu, blokların dikey olarak hizalanmasıdır. Yine şunu söylemek gerekir ki, bunun için özel olarak tasarlanmış bir özellik yoktur ancak bilmeniz gereken birkaç püf noktası vardır.

Ofsetleri yüzde olarak ayarlayın. Ana öğenin yüksekliğini biliyorsanız ve içine başka bir blok düzeyinde öğe yerleştirirseniz, yüzde dolgusunu kullanarak onu ortalayabilirsiniz. Örneğin, ebeveynin yüksekliği 600 pikseldir. İçine 300 piksel yüksekliğinde bir blok koydunuz. Merkezlemek için yukarıdan ve aşağıdan ne kadar geri hareket etmeniz gerekiyor? Ebeveyn boyunun %25'i olan her biri 150 piksel.

Bu yöntem, yalnızca boyutlar hesaplama yapmanıza izin verdiğinde ortalamanıza izin verir. Ve eğer ebeveyninizin boyu 887 piksel ise, o zaman tam olarak hiçbir şey yazamazsınız, bu zaten açık.

Tablo hücresine bir öğe ekleyin. Yine, ana öğeyi bir tablo hücresine dönüştürürsek, içine eklenen blok otomatik olarak dikey olarak ortalanacaktır. Bunu yapmak için ebeveynin yalnızca dikey hizalama: orta ayarlaması gerekir.

Ve buna ek olarak, margin: 0 auto yazarsak, eleman yatay olarak ortalanır!

Çoğu zaman görev, bloğu sayfanın / ekranın ortasına hizalamaktır ve hatta bir Java komut dosyası olmadan, sabit boyutlar veya negatif girintiler ayarlamadan, böylece blok boyutunu aşarsa kaydırma çubukları ebeveyn üzerinde çalışır. Bir bloğu ekranın ortasına nasıl hizalayacağınıza dair nette oldukça fazla monoton örnek var. Kural olarak, çoğu aynı ilkelere dayanmaktadır.

Sorunu çözmenin ana yolları, artıları ve eksileri aşağıdadır. Örneklerin özünü anlamak için, belirtilen bağlantılardaki örneklerde Sonuç penceresinin yüksekliğini/genişliğini azaltmanızı tavsiye ederim.

Seçenek 1. Negatif dolgu.

konumlandırma engellemeküst ve sol öznitelikler %50 oranında ve bloğun yüksekliğini ve genişliğini önceden bilerek, boyutun yarısına eşit bir negatif kenar boşluğu ayarlayın engellemek. Bu seçeneğin büyük bir dezavantajı, negatif girintileri saymanız gerekmesidir. Aynı şekilde engellemek kaydırma çubukları ortamında tam olarak doğru davranmaz - negatif girintileri olduğu için basitçe kesilir.

Üst ( 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: -125px 0 0 -125px; img (maksimum genişlik: %100; yükseklik: otomatik; görüntü: blok; kenar boşluğu: 0 otomatik; kenarlık: yok; ) )

Seçenek 2: Otomatik girinti.

Daha az yaygın, ancak birincisine benzer. İçin engellemek genişliği ve yüksekliği ayarlayın, sağ üst alt sol öznitelikleri 0 olarak konumlandırın ve marjı otomatik olarak ayarlayın. Bu seçeneğin avantajı, çalışan kaydırma çubuklarıdır. ebeveyn, ikincisi %100 genişliğe ve yüksekliğe sahipse. Bu yöntemin dezavantajı katı boyutlandırmadır.

Üst ( 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; ekran: blok; kenar boşluğu: 0 otomatik; kenarlık: yok; ) )

Seçenek 3. Tablo.

Biz sorarız ebeveyn tablo stilleri, hücre ebeveyn Metin hizalamasını merkeze ayarlayın. ANCAK blok satır içi blok modelini ayarlayın. Dezavantajları, kaydırma çubuklarının çalışmaması ve genel olarak tablonun "öykünmesinin" estetiği değildir.

Üst ( genişlik: %100; yükseklik: %100; görüntü: tablo; konum: mutlak; üst: 0; sol: 0; > .inner ( görüntü: tablo-hücre; metin hizalama: merkez; dikey hizalama: orta; ) ) .block ( görüntü: satır içi blok; img ( görüntü: blok; kenarlık: yok; ) )

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

Seçenek 4. Sözde öğe.

Bu seçenek, önceki yöntemlerde listelenen tüm sorunlardan yoksundur ve ayrıca orijinal görevleri de çözer. Önemli olan sahip olmaktır ebeveyn stilleri ayarla sözde elemanönce, yani %100 yükseklik, merkez hizalama ve satır içi kutu modeli. İle aynı engellemek satır içi bloğun modelini orta hizaya koyun. İle engellemek altına düşmedi sözde eleman birincisinin boyutları daha büyük olduğunda ebeveyn, belirtmek ebeveyn boşluk: şimdi rap ve yazı tipi boyutu: 0'dan sonra y engellemek bu stilleri aşağıdakiyle iptal edin - boşluk: normal. Bu örnekte, yazı tipi boyutu: 0 arasındaki sonuçtaki boşluğu kaldırmak için gereklidir. ebeveyn ve engellemek kod biçimlendirme ile bağlantılı olarak. Boşluk başka yollarla da giderilebilir, ancak buna izin vermemek en iyisi olarak kabul edilir.

Ebeveyn ( genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; taşma: otomatik; beyaz boşluk: şimdi rap; metin hizalama: merkez; yazı tipi boyutu: 0; &:önce ( yükseklik: %100; görüntü: satır içi blok; dikey hizalama: orta; içerik: ""; ) ) .block ( görüntü: satır içi blok; beyaz boşluk: normal; dikey hizalama: orta; metin hizalama: sola ; img ( ekran: blok; kenarlık: yok; ) )

Veya ebeveynin tüm sayfayı değil, yalnızca pencerenin yüksekliğini ve genişliğini almasını istiyorsanız:

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

Seçenek 5. Flexbox.

En basit ve en zarif yollardan biri flexbox kullanmaktır. Gereksiz vücut hareketleri gerektirmez, olup bitenlerin özünü oldukça net bir şekilde anlatır ve yüksek esnekliğe sahiptir. Bu yöntemi seçerken hatırlanması gereken tek şey, sürüm 10 dahil IE desteğidir. caniuse.com/#feat=flexbox

Ebeveyn ( genişlik: %100; yükseklik: %100; konum: sabit; üst: 0; sol: 0; ekran: esnek; öğeleri hizala: merkez; içeriği hizala: merkez; içeriği yasla: merkez; taşma: otomatik; ) .block ( arka plan: #60a839; img ( ekran: blok; kenarlık: yok; ) )

Seçenek 6. Dönüştür.

Yapıyla sınırlıysak ve ana öğeyi değiştirmenin bir yolu yoksa uygundur, ancak bloğun bir şekilde hizalanması gerekir. translate() css işlevi kurtarmaya gelecektir. %50 mutlak konum değeri, kutunun sol üst köşesini tam olarak merkeze konumlandırır, ardından negatif çevirme değeri kutuyu kendi boyutlarına göre hareket ettirir. Olumsuz etkilerin bulanık kenarlar veya yazı tipi stili şeklinde görünebileceğini lütfen unutmayın. Ayrıca, benzer bir yöntem, java-script "a" kullanılarak bloğun konumunun hesaplanmasında sorunlara yol açabilir. Bazen, sol css özelliğinin kullanılması nedeniyle genişliğin %50'lik kaybını telafi etmek için, kural blok yardımcı olabilir: sağ kenar boşluğu: -%50; .

Parent ( genişlik: %100; yükseklik: %100; konum: sabit; üst: 0; sol: 0; taşma: otomatik; ) .block ( konum: mutlak; üst: %50; sol: %50; dönüştürme: çevir( -50%, -50%); img (görüntüleme: blok; ) )

Seçenek 7. Düğme.

Kullanıcı azproduction seçeneği nerede engellemek bir düğme etiketine sarılır. Düğme, içindeki her şeyi, yani çizgi ve blok çizgi (inline-blok) modelinin öğelerini ortalama yeteneğine sahiptir. Pratikte tavsiye etmiyorum.

Ebeveyn ( genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; taşma: otomatik; arka plan: yok; kenarlık: yok; anahat: yok; ) .block ( ekran: satır içi blok; img ( ekran: blok;; kenarlık: yok; ) )

Bonus

4. seçenek fikrini kullanarak, kenar boşluklarını ayarlayabilirsiniz. engellemek, ve aynı zamanda ikincisi kaydırma çubukları ortamında yeterince görüntülenecektir.
Örnek: jsfiddle.net/serdidg/nfqg9rza/2 .

Ayrıca resmi ortaya hizalayabilirsiniz ve resim daha büyükse ebeveyn, boyuta göre ölçeklendir ebeveyn.
Örnek: jsfiddle.net/serdidg/nfqg9rza/3 .
Büyük resim örneği:

Her düzen tasarımcısı sürekli olarak içeriği bir blokta yatay veya dikey olarak hizalama ihtiyacıyla karşı karşıyadı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'a gitmemek için bu bilgileri benim için uygun olan formda göndermeye karar verdim.

Blokları Bilinen Boyutlarla Hizalama

CSS'yi kullanmanın en kolay yolu, bilinen 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 piksellik bir resim var ve onu 240'a 300'lük bir blokta ortalamak istiyoruz. Dış bloğun yüksekliğini ve genişliğini = 200 piksel olarak ayarlayabilir ve üstte ve altta 20 piksel ekleyebiliriz ve 50 sağda ve solda.

.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 "pozisyon: göreceli" ile en yakın ebeveyne göreli olarak konumlandırılabilir. Bunun için tüm özellikler (" tepe","Sağ","alt","ayrıldı") 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) + sol (sağ, alt, üst) değeri ana bloğun boyutunu aşmamalıdır. 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(space.jpg) ; ) 0 ; sağ : 0 ; kenar boşluğu : otomatik ; arka plan : url(king.png) ; )

Yatay hizalama

"Metin hizalama: merkez" ile hizalama

Metni bir blokta hizalamak için özel bir özellik vardır " Metin hizalama". " olarak ayarlandığında merkez" Her metin satırı yatay olarak hizalanacaktır. Çok satırlı metinler için bu çözüm nadiren kullanılır, daha sıklıkla bu seçenek açıklıkları, bağlantıları veya resimleri hizalamak için bulunabilir.

Bir keresinde CSS ile metin hizalamanın nasıl çalıştığını göstermek için bir metin bulmam gerekti ama aklıma ilginç bir şey gelmedi. İlk başta bir tekerlemeyi bir yere kopyalamaya karar verdim ama bunun makalenin özgünlüğünü bozabileceğini ve sevgili okurlarımızın Google'da bulamayacağını hatırladım. Ve sonra bu paragrafı buraya yazmaya karar verdim - sonuçta mesele onunla değil, nokta 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 ("ekran: satır içi") için de çalışacağını belirtmekte fayda var.

Ancak bu metin sola hizalıdır, ancak sarmalayıcıya göre ortalanmış bir bloktadır.

.example-wrapper3 ( metin hizalama : merkez ; arka plan : #FF90B8 ; ) . satır içi metin ( ekran : satır içi blok ; genişlik : % 40 ; dolgu : 10 piksel ; metin hizalama : sol; arka plan : #FFE5E5 ; )

Blokları kenar boşluklarıyla hizalama

Genişliği bilinen blok düzeyindeki öğeler, bunları "sol kenar boşluğu: otomatik; kenar boşluğu sağ: otomatik" olarak ayarlayarak yatay olarak kolayca 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ışmayacaktır.

.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ğerdir - en mantıklı ve yeterlidir. Bu bariz görünse de, bazen olumsuz girintili göz korkutucu örnekler gördüm, bu yüzden açıklığa kavuşturayım dedim.

Dikey hizalama

Dikey hizalama ile ilgili çok daha fazla sorun var - görünüşe göre, bu CSS'de sağlanmadı. İstenilen sonuca ulaşmanın birkaç yolu vardır, ancak hepsi çok güzel değildir.

Line-height özelliğiyle hizalama

Blokta sadece bir satır olması durumunda, dikey hizalamasını " satır yüksekliği" ve istenen yüksekliğe ayarlayın. Güvende olmak için, değeri "line-height" değerine eşit olacak olan "height"ı da 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 : merkez ; )

Bir bloğu birden çok satırla hizalamak da mümkündür. Bunu yapmak için ek bir sarmalayıcı blok 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 "dikey hizalama: orta" 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 : merkez ; )

Sarıcı blok "font-size: 0" ayarlı olmalıdır. Yazı tipi boyutunu sıfıra ayarlamazsanız, tarayıcı kendisinden birkaç piksel daha ekleyecektir. Bu özellikler üst öğeden miras alındığından, iç blok için yazı tipi boyutunu ve satır yüksekliğini de belirtmeniz gerekecektir.

Tablolarda dikey hizalama

Mülk " dikey hizalama" tablo hücrelerini de etkiler. Değer "orta" olarak ayarlandığında hücrenin içindeki içerik ortalanır. Tabii ki, tablo düzeni günümüzde arkaik 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ınmış bir yerleşim örneği verilmiştir. Bu şekilde dikey olarak ortalanmış olan resim ilgi çekicidir.

.one_product .img_wrapper ( görüntü : 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 ; ekran : blok ; kenar boşluğu : 0 otomatik ; )

Unutulmamalıdır ki, eleman "yok" dışında bir "kayan nokta" kümesine sahipse, yine de blok şeklinde olacaktır (gösterge: blok) - o zaman ek bir blok sarmalayıcı kullanmanız gerekecektir.

Ek bir satır içi öğeyle hizalama

Ve satır içi öğeler için başvurabilirsiniz " dikey hizalama: orta". Bu durumda, " ile tüm öğeler ekran: satır içi" aynı çizgide olan ortak bir merkez çizgisi ile 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 sözde öğelerin kullanılması uygundur:before veya:after.

.example-wrapper6 ( yükseklik : 300 piksel ; metin hizalama : merkez ; arka plan : #70DAF1 ; ) .pudge ( ekran : 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 ( ekran : satır içi blok ; yükseklik : %100 ; dikey hizalama : orta ; )

Ekran: esnek ve hizalama

Explorer 8 kullanıcılarını pek umursamıyorsanız veya onlar için fazladan bir javascript parçası koymaya istekliyseniz, o zaman "display: flex" kullanılabilir. Esnek kutular hizalama sorunlarını gerçekten iyi halleder ve içeriği ortalamak için "margin: auto" yazmak yeterlidir.

Şimdiye kadar, bu yöntem neredeyse hiç benimle tanışmadı, 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 istediklerim bu kadardı. Artık içeriği ortalamak sorun olmayacak!




İlgili Makaleler

En son makaleler
Popüler Makaleler
Editörün Seçimi
rzdoro.ru