Bu eğitimde, HTML ve CSS ile görüntüleri nasıl ortalayacağımızı göreceğiz. Hiç de karmaşık değil ve buna sık sık web sayfalarımız için ihtiyacımız olacak. Biri sadece HTML kullandığımız, diğeri CSS kullanarak ve son olarak Bootstrap kullanarak bazı seçenekler göreceğiz.
HTML ve CSS, web sayfaları ve uygulamaları oluşturma dünyasında önde gelen iki web komut dosyası dilidir. Bu görevde her iki dil birlikte çalışır. HTML web sayfalarına bir yapı verirken, CSS stil ve görsel veya işitsel kısımla ilgilenir. HTML, bir sayfanın farklı öğelerini saran etiketler sağlar ve bu şekilde niteliklerle birlikte web sitemizin iskeletini oluştururuz.
HTML ve CSS arasındaki farklarÖzetlemek gerekirse, HTML ve CSS arasındaki farkları aşağıdaki gibi görebiliriz:
- HTML'yi öğrenmek ve uygulamak daha kolaydır
- HTML Birden çok dilde mevcuttur
- HTML hafif ve etkilidir
- HTML'nin sınırlı güvenliği vardır
- HTML biraz yavaş.
- CSS, CSS'den daha geniş bir nitelik ve stil kitaplığına sahiptir
- CSS, sayfa yükleme süresini iyileştirir.
- CSS mükemmel uyumluluğa ve kolay bakıma sahiptir.
- CSS bazı performans sorunları veriyor
- CSS'nin yerleşik güvenliği yoktur
Bugün, adımları doğrudan CSS ile gerçekleştirmeniz önerilir, ancak daha fazla HTML iseniz, aşağıdaki seçeneklere de sahip olabilirsiniz.
1. Yalnızca HTML kullanarak web sayfasında görüntü nasıl ortalanır
Bu seçenekleri görüntüyü HTML ile ortalamak için yapmamıza rağmen, bunu kolayca yapmanın iki yolunu göreceğiz.
HTML ve merkez etiketi ile ortadaki resimBu basit seçenekte, resmi ortadaki etiketlerle sarmak yeterlidir.
- “src” kısmı görüntünün yol adresini belirtmek için kullanılır.
- Alt kısım ise görselin ismi hakkında web sayfasına bilgi verir.
Ek olarak, görüntünün yüksekliğini ve genişliğini şu şekilde atamalıyız:
yükseklik = ”250” ”
HTML ve orta ile ortadaki resimAncak görüntülerle ilgili olarak, gördüğümüz bu merkez kavramı farklıdır ve orta hizalama kullanmak daha iyidir, bu nedenle kod aşağıdaki gibi kalır:
Ayrıca metin eklersek şu koda sahip oluruz:
Bu örnek, HTML'de metin içeren bir görüntüyü ortalamak olacaktır.
Hizalama özelliğiyle resmi HTML'ye hizalaBir görüntüyü yatay olarak hizalamak istiyorsak, bunu metinle yaptığımıza benzer şekilde yapabiliriz, yani etiketler içinde align niteliğini kullanabiliriz.
veya. Özniteliğin görüntü etiketi ile göründüğü kodu oluşturacağız. Etiket, align niteliğini kabul edenlerden biridir, ancak kullanım farklıdır.
Ama dediğimiz gibi, etiket
Buraya sağ kısmın tamamını dolduracak metni koyar ve yerleştirdiğimiz resmi sarardık. Çözücü çözücü çözücü metnini doldurmaya devam ediyoruz
Metni ve resmi sola hizalamak için aynısını yapacağız, ancak “sol” yerine “sağ” yazacağız.
Yerleştirme ve stil özellikleri CSS'ye bırakıldığından ve doğrudan HTML'de kullanılmadığından önerilmez. Bu şekilde bakımı ve değiştirilmesi daha kolay bir kodumuz olacak, ancak herhangi bir zamanda küçük ve hızlı bir test için ihtiyacınız olursa, bilmeye değer.
2. CSS ile bir web sayfasında bir resim nasıl ortalanır
Burada HTML kodumuz ve CSS kodumuz olacak. HTML'ye bakarak başlıyoruz.
Görüntüye ortalanmış olarak adlandırılan bir sınıf koyduk ve bu, daha sonra CSS'de stillendirmemize yardımcı olacak. Görüntüyü ortalamak için kod aşağıdadır.
.center {kenar boşluğu: 10 piksel otomatik; Ekran bloğu; } Web sayfamız için CSS kullanarak bir resmi hizalamak için aşağıdaki kodu da kullanabiliriz:
.center {sol kenar boşluğu: otomatik; sağ kenar boşluğu: otomatik; }Metin merkezleme yöntemi kullanıldığı için bir tarayıcıda bu sizin için işe yaramazsa, tarayıcıya görüntünün blok düzeyinde bir öğe olduğunu belirtmeliyiz. Bu şekilde onu başka bir blokmuş gibi ortalayabiliriz. Bu kodu kullanacağız:
Elemanın bir blok olarak görünmesini sağlıyoruz ve ona otomatik bir kenar boşluğu veriyoruz (yanlarda kenar boşluğunun otomatik olması yeterli, üstte ve altta ne istersen koyabilirsin). Görüntü tüm genişliği kaplıyorsa, ortalanmayacağını unutmayın.
img.center {ekran: blok; sol kenar boşluğu: otomatik; sağ kenar boşluğu: otomatik; }
3. Bootstrap kullanarak web sayfasında bir görüntü nasıl ortalanır
Bu popüler çerçeve ile her şey daha basit, sadece merkez blok sınıfını görüntüye yerleştirmemiz gerekiyor.
Bootstrap'i indirmeniz ve bağlamanız veya CDN'nizi HTML'mize koymanız gerekecek, bunun için bağlantınızı aşağıya bırakıyorum:
Bu kodların uygulanmasının sonucunu aşağıdaki resim ile görebiliriz:
Bu sayede hem HTML'de hem de CSS kullanarak görsellerimizi ortalayabilir ve böylece estetik olarak daha başarılı web çalışmaları yapabiliriz.
