HTML'de bir resim nasıl ortalanır

Yazar: Mark Sanchez
Yaratılış Tarihi: 6 Ocak Ayı 2021
Güncelleme Tarihi: 1 Temmuz 2024
Anonim
HTML Yazı ve Resim Ortalama [Çözüldü]
Video: HTML Yazı ve Resim Ortalama [Çözüldü]

İçerik

Bağlanmak hizalamak etiket html> HTML5'ten beri kullanımdan kaldırılmıştır. Bu özellik çoğu web tarayıcısında çalışmaya devam etse de, görüntüleri Basamaklı Stil Sayfalarını (CSS) kullanarak hizalamanız önerilir. Bu makalede, CSS ve kullanımdan kaldırılmış etiketi kullanarak görüntüleri nasıl ortalayacağınızı göstereceğiz. hizalamak.

adımlar

Yöntem 1/2: CSS (Önerilen)

  1. 1 Resim için HTML kodu ekleyin. Görüntüyü hizalamak için basamaklı stil sayfaları (CSS) kullanacaksınız, ancak HTML kullanarak sayfaya yerleştirmeniz gerekecek. Etiket kullanımına bir örnek aşağıdadır resim> kodunuza bir resim eklemek için:

    img src = "dog.webp" alt = "bu bir köpeğin resmidir">

    • Onun yerine köpek.webp görüntü dosyasının adını değiştirin ve "alt" den sonra görüntünün açıklamasını girin. Anlam merkez "sınıf" için değişiklik yapmayın, çünkü bu ada sahip bir CSS sınıfı oluşturacaksınız.
  2. 2 CSS kodunu bulun. Sitenizin ayrı bir CSS dosyası varsa açın. Değilse, CSS büyük olasılıkla HTML dosyasının en üstünde, etiketlerin içindedir. kafa>... Etiketleri bulmak için dosyanın en üstüne gidin stil> / stil>.
    • etiketleri ise stil> / stil> hayır onları ekle Daha fazla bilgi için bu makaleyi okuyun.
  3. 3 Resmi hizalamak için CSS ekleyin. Resmin sayfada görünmesini sağlamak için "%50" yerine farklı bir değer girebilirsiniz. Görüntüyü "%100" değeriyle ortalayamazsınız, bu nedenle bu sayı farklı olmalıdır.

    .center {ekran: blok; sol kenar boşluğu: otomatik; sağ kenar boşluğu: otomatik; genişlik: %50; }

  4. 4 Değişikliklerinizi kaydedin. HTML dosyasını ve CSS dosyasını (varsa) kaydedin. Bu, görüntüyü ortalayacaktır.
    • Ayrıca etiketlerin içinde resim> ekleyebilir diğer görüntüleri ortalamak için

Yöntem 2/2: HTML'deki "align" özelliği

  1. 1 Yeni bir paragraf oluşturun. Görüntüleri ortalamanın bu yöntemi kullanımdan kaldırılmış olsa da, birçok tarayıcıda hala çalışır. Ancak, tarayıcılar belirtilen özniteliği desteklemeyi bıraktığında siteyi çalışır durumda tutmak için CSS kullanmanızı öneririz. özniteliğin olduğunu unutmayın hizalamak resmi yalnızca onu çevreleyen öğenin içinde ortalar (örneğin, etiketlerin içinde) p> / p> veya div> / div>). Örnek olarak, HTML dosyasında ekleyerek yeni bir paragraf oluşturacağız. p> ayrı bir satırda.
  2. 2 Resim için HTML kodu ekleyin. etiketinden sonra aşağıdaki kodu girin p>... Bu örneği kılavuz olarak kullanın:

    p> img src = "dog.webp" alt = "resim" hizalama = "orta">

    • Onun yerine köpek.webp görüntü dosyasının adını değiştirin ve "alt" den sonra görüntünün açıklamasını girin.
    • Orta öznitelik, tarayıcıya resmi sayfanın ortasında görüntülemesini söyler.
  3. 3 Paragraf etiketini kapatın. Bunu yapmak için ekleyin / p> resim etiketinden sonra. Bitmiş kod şöyle görünmelidir:

    p> img src = "dog.webp" alt = "resim" hizalama = "orta"> / p>

  4. 4 Değişikliklerinizi kaydedin. Bu, görüntüyü ortalayacaktır.