HTML Resim Ortalama Yöntemleri

bLastX · 22 Şub 2024

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:

<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.

HTML:

<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.

HTML:

<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.