HTML'de Resim Hizalama (Sağa, Sola ve Ortalama)
HTML'de bir resmi sağa, sola veya ortalamak için farklı yöntemler kullanabilirsiniz.1. align Özniteliği (Eski Yöntem)
HTML'de eski sürümlerde align özniteliği kullanılıyordu. Ancak bu yöntem artık HTML5'te geçerli değildir ve modern CSS kullanılması önerilir.
Kod:
<!-- Sağa hizalama -->
<img src="resim.png" align="right" />
<!-- Sola hizalama -->
<img src="resim.png" align="left" />
<!-- Ortaya hizalama (Bu yöntem HTML5'te çalışmaz) -->
<img src="resim.png" align="center" />Not: align özniteliği günümüzde kullanılmaz. Bunun yerine CSS kullanmalısınız.
2. CSS ile Modern Resim Hizalama
Sağa veya Sola Hizalama (float yöntemi)
Modern HTML/CSS’de float özelliği kullanarak resmi sağa veya sola hizalayabilirsiniz:
HTML:
<!-- Sağa hizalama -->
<img src="resim.png" style="float: right;">
<!-- Sola hizalama -->
<img src="resim.png" style="float: left;">
Sayfanın düzenini bozmamak için aşağıdaki CSS kodunu ekleyebilirsiniz:
CSS:
img {
margin: 10px; /* Resmin etrafına boşluk ekler */
} Resmi Ortalamak (display: block + margin: auto yöntemi)
Bir resmi yatay olarak ortalamak için display: block ve margin: auto kullanabilirsiniz:
Kod:
<img src="resim.png" style="display: block; margin: auto;"> Resmi Ortalamak (text-align yöntemi - sadece kapsayıcı için)
Eğer resmi bir div içine alıp ortalamak istiyorsanız, aşağıdaki yöntemi kullanabilirsiniz:
Kod:
<div style="text-align: center;">
<img src="resim.png">
</div>3. Esnek ve Duyarlı Resim Hizalama (Flexbox Yöntemi)
Flexbox kullanarak da resmi kolayca ortalayabilirsiniz:
Kod:
<div style="display: flex; justify-content: center;">
<img src="resim.png">
</div>4. Tam Örnek Kod
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Resim Hizalama</title>
<style>
.resim-container {
text-align: center; /* Resmi ortalar */
}
.resim-container img {
width: 200px; /* Resmin boyutunu belirleme */
}
</style>
</head>
<body>
<!-- Sola hizalanmış resim -->
<img src="resim.png" style="float: left; margin: 10px;">
<!-- Sağa hizalanmış resim -->
<img src="resim.png" style="float: right; margin: 10px;">
<!-- Ortalanmış resim -->
<div class="resim-container">
<img src="resim.png" alt="Ortalanmış Resim">
</div>
</body>
</html>Sonuç
float: right; → Sağa hizalar float: left; → Sola hizalar margin: auto; display: block; → Ortalar text-align: center; (div içinde) → Ortalar display: flex; justify-content: center; → Ortalar (Flexbox ile)Eski align özniteliği yerine CSS kullanmanız önerilir.