Sağdaki teklif

son ile cümle

C AT E TÖİle

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

Basit bir metin girintisi özelliğidir.

Bunu bir tablo olarak görüntülemenin yolu, bundan sonra içindeki dikey hizalama özelliğini kullanabiliriz (farklı elemanlarda farklı şekilde çalışır).

#wrapper( görüntü: tablo; ) #hücre( görüntü: tablo-hücre; dikey hizalama: orta; )

profesyoneller

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

eksiler

• IE 7 ve altında çalışmıyor
• Çok sayıda iç içe etiket

2. yöntem

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

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

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

profesyoneller

• Tüm tarayıcılarda çalışır.
• Ekstra yatırım yok.

eksiler

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

3. yöntem

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

#floater( kayan nokta: sol; yükseklik: %50; kenar boşluğu: -120 piksel; ) #içerik( temizle: her ikisi; yükseklik: 240 piksel; konum: göreli; )

profesyoneller

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

eksiler

• Bence sadece bir tane: fazladan bir boş eleman kullanılıyor.

4. yöntem.

Bu yöntem, position:absolute özelliğini kullanır; sabit boyutlu (genişlik ve yükseklik) div'ler için. Sonra koordinatlarını top:0; alt:0; , ancak sabit bir yüksekliğe sahip olduğu için esnemez ve ortalanır. Bu, sabit genişlikli blok düzeyinde bir öğeyi yatay olarak ortalamak için iyi bilinen yönteme çok benzer (margin: 0 auto;).

#content(konum: mutlak; üst: 0; alt: 0; sol: 0; sağ: 0; kenar boşluğu: otomatik; yükseklik: 240 piksel; genişlik: %70; )

profesyoneller

• Çok basit.

eksiler

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

5. yöntem

Tek bir metin satırını ortalamak için bu yöntemi kullanabilirsiniz. Metnin yüksekliğini (satır yüksekliği) öğenin yüksekliğine (yükseklik) ayarlamanız yeterlidir. Bundan sonra, çizgi ortada görüntülenecektir.

#content( yükseklik: 100 piksel; satır yüksekliği: 100 piksel; )

profesyoneller

• Tüm tarayıcılarda çalışır.
• Uygun değilse metni kesmez.

eksiler

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

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

Artık dikey merkez hizalamasını nasıl elde edeceğinizi bildiğinize göre, sonunda şöyle görünecek basit bir web sitesi yapalım:

Aşama 1

Anlamsal işaretleme ile başlamak her zaman iyidir. Sayfamız şu şekilde yapılandırılacaktır:

• #floater (içeriği ortalamak için)
• #centred (merkez eleman)
  • #yan
    • #logo
    • #nav (liste
    • #içerik
  • #bottom (telif hakları ve tümü için)

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

  Bir şirket

  • Ev
  • Ürün:% s
  • Blog
  • İletişim
  • Hakkında

  Sayfa başlığı

  Süreç merkezli işbirliği ve fikir paylaşımından sonra katma değerli dış kaynak kullanımını bütünsel olarak yeniden tasarlayın. Etkinleştirilmiş zorunluluklar aracılığıyla etkili niş pazarları enerjik bir şekilde basitleştirin. Zorlayıcı senaryolardan sonra premium inovasyona bütünsel olarak hakim olun. Son teknoloji ürünü ürünlerle insan sermayesindeki yüksek standartları sorunsuz bir şekilde yeniden özetleyin. Sağlam girdaplardan önce standartlarla uyumlu şemaları ayırt edici bir şekilde birleştirin. Kullanıma hazır bilgiler karşısında kaldıraçlı web hazırlığını benzersiz bir şekilde yeniden özetleyin.

  Başlık 2

  Müşteri odaklı süreçler yerine özelleştirilmiş web hazırlığını verimli bir şekilde benimseyin. Proaktif teknolojiler karşısında platformlar arası zorunlulukları iddialı bir şekilde büyütün. Kurumsal çapta arabirimler olmadan çok disiplinli meta hizmetleri uygun şekilde güçlendirin. Odaklanmış e-pazarlarla rekabetçi stratejik tema alanlarını uygun şekilde düzene sokun. Katma değerli pazarlar karşısında birinci sınıf toplulukları fosfofloresan olarak birleştirir. Sağlam e-hizmetlerden önce bütünsel hizmetleri uygun şekilde yeniden icat edin.

  Telif hakkı bildirimi buraya gelir

  
  
  

  Adım 2

  Şimdi sayfaya eleman yerleştirmek için en basit CSS'yi yazacağız. Bu kodu style.css dosyasına kaydetmelisiniz. Bağlantının html dosyasına yazıldığı üzerindedir.

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

  İçeriğimizi merkeze hizalamadan önce, gövde ve html yüksekliklerini %100 olarak ayarlamamız gerekiyor. Yükseklik, iç ve dış dolgu (dolgu ve kenar boşluğu) olmadan kabul edildiğinden, kaydırma çubukları olmaması için onları (dolgu) 0'a ayarladık.

  "Flater" öğesinin alt dolgusu, içeriğin yüksekliğinin (400px) eksi yarısıdır, yani -200px;

  Sayfanız şimdi şöyle görünmelidir:

  

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

  #centered öğesi position:relative olarak ayarlandığından, içindeki öğelerin mutlak konumlandırmasını kullanabiliriz. Ardından overflow:auto; #content öğesi için, sığacak içerik yoksa kaydırma çubuklarının görünmesi için.

  Aşama 3

  Ve yapacağımız son şey, sayfanın biraz daha çekici görünmesi için biraz stil eklemek. Menü ile başlayalım.

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

  Menünün daha iyi görünmesi için yaptığımız ilk şey, list-style:none özniteliğini ayarlayarak madde işaretlerini kaldırmak ve ayrıca varsayılanlar tarayıcılar arasında büyük farklılıklar gösterdiğinden dolgu ve dolguyu ayarlamaktı.

  Daha sonra bağlantıların blok düzeyinde öğeler olarak oluşturulması gerektiğini belirttiğimizi unutmayın. Şimdi, görüntülendiklerinde, bulundukları öğenin tüm genişliği boyunca gerilirler.

  Menüler için kullandığımız bir diğer ilginç şey ise :before ve :after sözde sınıflarıdır. Bir öğeden önce ve sonra bir şeyler eklemenize izin verirler. Bu, her bağlantının sonuna ok gibi simgeler veya simgeler eklemenin iyi bir yoludur. Bu numara, Internet Explorer 7 ve altındaki sürümlerde çalışmaz.

  

  4. Adım

  Ve son olarak, daha da fazla güzellik için tasarımımıza bazı peçeler ekleyeceğiz.

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

  Bu stillerde, #centered öğesi için yuvarlatılmış köşeler belirledik. CSS3'te bu, border-radius özelliği tarafından ele alınacaktır. Bu, Mozilla Firefox ve Safari/Webkit için -moz ve -webkit öneklerini kullanmak dışında bazı tarayıcılar tarafından henüz uygulanmamıştır.

  

  uyumluluk

  Tahmin edebileceğiniz gibi, uyumluluk sorunlarının ana kaynağı Internet Explorer'dır:

  • #floater öğesi bir genişliğe ayarlanmalıdır
  • IE 6'da menüler etrafında ekstra dolgu

  237152 görüntüleme

  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'deki metni üç farklı şekilde nasıl ortalayacağımıza bakalım. Son ikisi doğrudan stil sayfasıyla ilgilidir. Sitenin sayfalarına bağlanan ve görünümlerini belirleyen bir CSS dosyası olabilir.

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

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

  Paragrafı merkeze hizalayın.

  Metin parçalarını farklı bir şekilde taşımak istiyorsanız, "center" parametresi yerine aşağıdaki değerleri girin:

  • yasla - metni sayfanın genişliğine göre hizalayın;
  • sağ - sağ kenarda;
  • sol - solda.

  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. Bunun için aşağıdaki kodu yazmanız gerekiyor.

  Metin bloğu.

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

  Sonucu elde etmenin başka bir alternatif yolu var. Birkaç şey 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:merkez;)

  "Rovno" kelimesinin sadece farklı çağrılabilecek bir sınıfın adı olduğunu not ediyorum. Bu, programcının takdirine bırakılmıştır.

  Benzer şekilde, HTML'de metni kolayca ortalayabilir, hizalayabilir 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ı mı istiyorsunuz?
  • İnternetten gelir elde etmek ister misiniz?

  Tüm cevaplar olumluysa, web sitesi geliştirmeye yönelik entegre yaklaşıma bakın. Bilgiler özellikle WordPress CMS'de çalışıyorsa faydalı 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 internetteki finansal fırsatlarla ilgili.

  Uzaktan işbirliği ile ana veya ek gelir getiren trafik arbitrajı, metin yazarlığı ve diğer faaliyetler alanı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ğıda yer almaktadı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 gelecek. %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üşüm: ç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 satır içi ve blok satır (satır içi 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 üste ve altta 20 piksel ekleyebiliriz, ve sol ve sağda 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 "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" metnin her 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, ancak bunun makalenin benzersizliğini bozabileceğini ve sevgili okuyucuları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 sarı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, "sol kenar boşluğu: otomatik; sağ kenar boşluğu: otomatik" olarak ayarlanarak 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 "none" dışında bir "float" setine sahipse, o zaman hala blok olacaktır (ekran: 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 ( height : 300px ; 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!