Web siteleri oluştururken merkezi resimler, metin ve blok öğeleri
Web sitelerini nasıl oluşturacağınızı öğreniyorsanız , ana sayfada ihtiyacınız olan en yaygın numaralardan biri, tarayıcı penceresinde öğeleri nasıl ortalayacağınızdır. Bu, sayfada bir görüntünün merkezileştirilmesi anlamına gelebilir veya tasarımın bir parçası olarak başlıklar gibi metni ortalamayı haklılaştırabilir.
Ortalanmış görüntülerin, metnin veya hatta tüm web sayfanızın bu görsel görünümünü gerçekleştirmenin doğru yolu, Basamaklı Stil Sayfaları'nı (CSS) kullanmaktır . Merkezleme özelliklerinin çoğu sürüm 1.0'dan bu yana CSS'de ve CSS3 ve modern web tarayıcıları ile harika çalışıyor.
Web tasarımının birçok yönü gibi, web sayfasında öğeleri ortalamak için CSS'yi kullanmanın birçok yolu vardır. Bu görsel görünüme ulaşmak için CSS'yi kullanmanın bazı farklı yollarını inceleyelim.
HTML'de Merkez Unsurlarına CSS Kullanmaya Genel Bakış
CSS ile merkezleme, web tasarımcılarının başlaması için bir meydan okuma olabilir çünkü bu görsel stili gerçekleştirmenin pek çok farklı yolu vardır. Yöntemlerin çeşitliliği, tüm tekniklerin her eleman üzerinde çalışmadığını bilen, hoş ya da tecrübeli web geliştiricileri olabilse de, bu, yeni web profesyonelleri için çok zor olabilir çünkü çok çeşitli yöntemler, hangi yaklaşımı ne zaman kullanacağını bilmeleri gerektiği anlamına gelir. Yapılacak en iyi şey, birkaç yaklaşımın anlaşılmasını sağlamaktır. Onları kullanmaya başladığınızda, hangi yöntemin en iyi durumda çalıştığını öğreneceksiniz.
Yüksek düzeyde, CSS'yi aşağıdakiler için kullanabilirsiniz:
- Merkez metni
- Blok düzeyindeki bir öğeyi ortalayın (bölüm gibi)
- Resmi ortala
- Bir bloğu veya resmi dikey olarak ortalayın
Birçok (çok) yıl önce, web tasarımcıları, görüntüleri ve metni ortalamak için
CSS ile Metin Merkezleme
Bir web sayfasında ortalamanın en kolay yolu metindir. Bunu yapmak için bilmeniz gereken tek bir stil özelliği vardır: metin hizalama. Aşağıdaki CSS stilini alın, örneğin:
p.center {text-align: center; }
Bu CSS çizgisiyle, merkez sınıfla yazılan her paragraf ana öğenin içinde yatay olarak ortalanır. Örneğin, eğer paragraf bir bölümün içinde olsaydı, yani bu bölümün bir çocuğu, yani
İşte HTML belgesinde uygulanan bu sınıfın bir örneği:
Bu metin ortalanmış.
Metni hizalama özelliği ile metin ortaladığınızda, içerdiği öğenin içinde ortalanacağını ve tam sayfanın kendisi içinde ortalanmayacağını unutmayın. Ayrıca, merkezi haklı metnin büyük içerik blokları için okunması zor olabileceğini de unutmayın, bu nedenle bu stili dikkatlice kullanın. Bir makale veya başka bir içerik için teaser metni gibi başlıklar ve küçük metin blokları, genellikle ortadayken okunması ve iyi bir şekilde okunması kolaydır, ancak tam makalenin kendisi gibi daha büyük metin blokları, içeriğin tamamen merkezi olması halinde tüketme zor olacaktır. haklı. Unutmayın, web sitesi metnine geldiğinde okunabilirlik her zaman önemlidir!
CSS ile İçeriğin Merkezleme Blokları
Bloklar, sayfanızda tanımlı bir genişliğe sahip ve blok düzeyinde bir öğe olarak oluşturulan tüm öğelerdir. Çoğu zaman, bu bloklar HTML
div.center {
kenar boşluğu: 0 otomatik;
genişlik: 80em;
}
Margin özelliği için bu CSS kısayolu üst ve alt kenar boşluklarını 0 değerine ayarlayacak, sol ve sağ ise "otomatik" olacaktır. Bu, esas olarak mevcut olan herhangi bir alanı alır ve öğeyi etkin bir şekilde sayfa üzerinde ortalayarak, viewport penceresinin iki yüzü arasında eşit olarak böler.
İşte HTML'de uygulanır:
ama içindeki metin hizalanmış.
Bloğunuz tanımlı bir genişliğe sahip olduğu sürece, kendisini içeren öğenin içine yerleştirecektir. Bu blokta yer alan metin, içinde ortalanmayacak, ancak sola dayalı olacak. Bu, web tarayıcılarında varsayılan metinde varsayılan olarak sola dayalı bir nedendir. Metnin de ortalanmasını istiyorsanız, bölümün merkezini oluşturmak için bu yönteme bağlı olarak daha önce ele aldığımız metin hizalama özelliğini kullanabilirsiniz.
CSS ile Görüntü Merkezleme
Çoğu tarayıcı, paragrafa zaten baktığımız aynı metin hizalama özelliğini kullanarak ortalanmış görüntüleri gösterecek olsa da, bu teknik W3C tarafından önerilmediğinden emin olmak iyi bir fikir değildir. Tavsiye edilmediğinden, tarayıcıların gelecekteki sürümlerinin bu yöntemi görmezden gelme şansı her zaman vardır.
Resmi ortalamak için metin hizalaması kullanmak yerine, tarayıcıya görüntünün blok düzeyindeki bir öğe olduğunu açıkça belirtmeniz gerekir. Bu şekilde, başka bir blokta olduğu gibi ortalayabilirsiniz. Bunu yapmak için CSS İşte:
img.center {
Ekran bloğu;
kenar boşluğu: otomatik;
kenar boşluğu: otomatik;
}
Ve burada ortalanmış olmak istediğimiz görüntü için HTML:
Ayrıca, satır içi CSS kullanarak nesneleri ortalayabilirsiniz (aşağıya bakın), ancak HTML işaretinize görsel stiller eklediğinden bu yaklaşım önerilmez. Unutmayın, stil ve yapıyı ayırmak istiyoruz, böylelikle HTML kodunuza CSS stilleri ekleyerek ayırmayı kırın ve mümkün olduğunca kaçınılmalıdır.
CSS ile Dikey Elemanları Merkezleme
Nesneleri dikey olarak ortalamak her zaman web tasarımında zorlayıcı olmuştur, ancak CSS3'teki CSS Esnek Kutu Düzeni Modülünün serbest bırakılmasıyla, şimdi bunu yapmanın bir yolu vardır.
Dikey hizalama, yukarıda belirtilen yatay hizalamaya benzer şekilde çalışır. CSS özelliği, orta değerle dikey olarak hizalanır.
.vcenter {
dikey hizalama: orta;
}
Bu yaklaşımın olumsuz tarafı, tüm tarayıcıların CSS FlexBox'ı desteklememesidir, ancak bu yeni CSS mizanpaj yöntemine giderek daha fazla şey gelecektir! Aslında, bugün tüm modern tarayıcılar şimdi bu CSS stilini destekliyor. Bu, Flexbox ile ilgili endişelerinizin çok eski bir tarayıcı sürümü olacağı anlamına gelir.
Eski tarayıcılarla ilgili sorunlarınız varsa, W3C, aşağıdaki yöntemle bir kapsayıcıya dikey olarak metin ortalamanızı önerir:
- Öğeleri, div gibi bir içeren öğenin içine ortalayın.
- İçeren eleman üzerinde minimum yükseklik ayarlayın.
- Öğe içeren bir tablo hücresi olarak bildirin.
- Dikey hizalamayı "orta" olarak ayarlayın.
Örneğin, burada CSS:
.vcenter {
min-yükseklik: 12em;
görüntüleme: tablo hücresi;
dikey hizalama: orta;
}
Ve işte HTML:
Bu metin kutuda dikey olarak ortalanmıştır.
Internet Explorer'ın Dikey Merkezleme ve Eski Sürümleri
Internet Explorer'ı (IE) ortalamak ve sonra yalnızca IE'nin stilleri görmesi için koşullu yorumları kullanmak için bazı yollar vardır, ancak bunlar biraz ayrıntılı ve çirkin. İyi haber şu ki, Microsoft'un eski IE sürümlerini desteklemedeki son kararı ile, desteklenmeyen tarayıcılar yakında çıkacak ve web tasarımcılarının CSS FlexBox gibi modern düzen yaklaşımlarını kullanmasını kolaylaştıracak. tüm web tasarımcıları için sadece merkezleme değil, daha kolay.