Web sayfasında, daha çok tasarımı organize etmek için sıklıkla kullandığımız <div> gibi bir blok öğesini merkeze yatay eksende merkeze hizalamak isteyebilirsiniz.Bir blok öğesini yatay olarak ortalamak için “margin: auto” uygulamalısınız. Elemanın genişliğini ayarlamak, kutunun sayfa kenarlarına kadar uzanmasını önleyecektir.Eleman daha sonra belirtilen genişliği alacak ve kalan alan iki kenar boşluğu “margin: auto” bildirimi kısıtlaması ile aralarında eşit olarak bölünecektir:
CSS:
!DOCTYPE html>
<html>
<head>
<style>
.merkez {
margin: auto;
width: 60%;
border: 3px solid #77ADF1;
padding: 10px;
}
</style>
</head>
<body>
<h2>div Öğesinin Yatay Hizalanması</h2>
<div class="merkez">
<p>Bu div öğesi yatay eksende ortalamıştır.</p>
</div>
</body>
</html>Alıntıdır
