HTML'de sıklıkla resim ortalama kullanılır. Bunu yapmanın birkaç farklı yöntemi vardır. Aşağıda üç ayrı şekilde resim ortalanıyor sonuçları bakımından aynı olsalarda teknik bakımdan birbirinden farklıdır.
HTML Resim Ortalama
Resmin içinde bulunduğu elementin align özelliğine center değeri verilerek resim element içinde ortalanır. Burada dikkat edilmesi gereken resmin içinde bulunduğu elementin CSS display özelliğinin block olması ya da genişliğinin resim boyutundan daha büyük bir değer olması gerekir.
HTML resim ortalama örnek kodu.
<div align="center"> <img src="test.jpg"/> <div>
CSS Resim Ortalama (text-align kullanımı ile)
HTML'de olduğu gibi CSS'tede benzer bir özellik olan 'text-align' bulunur. Resmin içinde bulunan elementin CSS text-align özelliği center yapılarak resim ortalanır. Resmin içinde bulunduğu elementin CSS display özelliğinin block ya da genişliğinin resim boyutundan daha büyük bir değer olması gerekir.
CSS resim ortalama örnek kodu.
<div style="text-align: center;"> <img src="test.jpg"/>
<div>
CSS Resim Ortalama (margin kullanımı ile)
Bu kullanımda ise resmin CSS margin özelliği outo yapılarak iki tarafındaki boşluğun aynı olması sağlanır böylece resim ortalanmış olur. Resmin içinde bulunduğu element yukarıda olduğu gibi resimden daha geniş bir ölçüde olmalı. Resmin CSS'i ise display özelliği block margin ise outo olmalı. Bu şekilde CSS ile resim ortalanmış olacak.
CSS margin özelliği ile resim ortalama örnek kodu.
<div> <img style="display: block; margin: auto;" src="test.jpg"/> <div>
Yukarıdaki kodları kullandığınız halde resim ortalanmıyorsa resmin CSS float özelliğininin ve resmin içinde bulunduğu elementin float özelliğinin none olmasına dikkat edin. (float'a herhangi bir değer verilmediğinde öntanımlı değeri none dır.) Ayrıca resmin içinde bulunduğu elementin yeterli genişliğe shaip olup olmadığını kontrol edin.
