CSS: text-align vs margin

Kedua properti CSS, text-align: center dan margin: 0 auto sering digunakan untuk membuat tampilan teks atau konten di tengah sebuah elemen di halaman web. Meskipun keduanya dapat menghasilkan hasil yang serupa, tetapi sebenarnya ada perbedaan antara kedua properti ini. Berikut ini adalah penjelasan lebih detailnya:

1. text-align: center

Properti text-align: center biasanya digunakan untuk mengatur posisi teks secara horizontal dalam sebuah elemen, seperti div atau paragraf. Ketika digunakan pada sebuah elemen, properti ini akan menempatkan semua teks dalam elemen tersebut di tengah secara horizontal. Namun, perlu dicatat bahwa properti ini hanya berlaku untuk teks di dalam elemen tersebut, bukan elemen itu sendiri. Jadi, jika Anda ingin elemen tersebut juga ditengah secara horizontal, Anda harus mengatur lebar elemen tersebut dan menambahkan margin kiri dan kanan yang sama. Properti ini juga dapat digunakan pada elemen inline seperti span.

Contoh seperti ini :

.center {
  text-align: center;
}

2. margin: 0 auto

Properti margin: 0 auto digunakan untuk mengatur margin suatu elemen. Ketika digunakan pada sebuah elemen, properti ini akan menempatkan elemen tersebut di tengah secara horizontal pada halaman web. Cara kerja properti ini adalah dengan mengatur margin kiri dan kanan elemen tersebut secara otomatis sehingga elemen tersebut berada di tengah halaman. Namun, perlu dicatat bahwa properti ini hanya berfungsi jika elemen tersebut memiliki lebar yang ditentukan. Jika elemen tersebut memiliki lebar yang fleksibel, maka properti ini tidak akan bekerja dengan benar.

Contoh Seperti ini :

.center {
  width: 50%;
  margin: 0 auto;
}

Kesimpulan

Kesimpulannya, text-align: center dan margin: 0 auto dapat digunakan untuk menengahkan elemen secara horizontal. Properti text-align: center digunakan untuk menengahkan teks di dalam elemen sedangkan margin: 0 auto digunakan untuk menengahkan elemen itu sendiri. Jadi, pilihan mana yang harus digunakan tergantung pada konteks penggunaannya.