Her ne kadar zor olmasa da, görüntüleri web sayfalarınızda ortalamak düşündüğünüzden daha fazla ilgili olabilir. Asıl sebep şu ki etiket bir satır içi öğedir, bu nedenle blok düzeyindeki öğelerden farklı davranır. Bazı yaklaşımlar HTML kullanır; diğerleri CSS kullanır ve bazıları onaylanmadıkları için diğerlerinden daha "uygun" olarak kabul edilir. Devam etmek için aşağıdaki listeden bir yöntem seçin ve talimatları izleyin.

HTML5'te destek için, text-align değeri olan bir stil niteliği kullanmalısınız : blok düzeyinde bir öğenin merkezinde; gibi etiketleri.

Örnek HTML kodu

İpucu: Yukarıda gösterildiği gibi bir satır içi stil eklemek yalnızca bir kez yapılmalı, birden fazla görüntüyü ortalamanız gerekiyorsa, aşağıdaki öneriyi kullanmalı ve gereksiz kodları azaltmaya ve web sayfanızı hızlandırmaya yardımcı olmak için bir CSS sınıfı oluşturmalısınız.

Yukarıdaki kodu kullanarak görüntü merkezi örneği

Blok düzeyinde bir elemana dönüştürme

Görüntüleri düzgün bir şekilde ortalamanın bir yolu da blok düzeyinde öğe olarak öğe. Bunu yapmak için sayfanızın başına bir kural ekleyin (aşağıdaki örnekte gösterilmiştir) veya bağlı bir harici CSS dosyasına.

Örnek HTML kodu

 .centerImage {text-align: center; Ekran bloğu; } 

Bu kodla, centerImage sınıfını bir uygulamaya uygulayabilirsiniz. Bir blok seviyesi öğesinde yuvalamak zorunda kalmadan etiketleyin. Bu yöntem birden fazla görüntü için çalışır.

Örnek merkezli görüntü kodu

Etiketleri kullanma

Bir resmi ekleyerek ortalayabilirsiniz. etiketinde etiketleri. Bu eylem, web sayfasındakileri ve sadece bunu merkezler. Bu yöntemin HTML5'te kullanımdan kaldırıldığı ve ileriye giden tüm tarayıcılarda her zaman çalışmayacağı belirtilmelidir. Bu yöntemi yalnızca yukarıda belirtilen diğer önerilerden hiçbirinin bir görüntüyü merkezlemeye çalıştığınız yerde çalışmadığı durumlarda kullanmanızı öneririz.

Örnek HTML kodu