CSS: text-align vs margin

The difference between text-align:center and margin:0 auto makes up the article

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.

4 comments

  1. maaf mas masukan dikit.. text-align itu properti, center adalah value, gabungan properti dan value, namanya deklarasi.. saya aja paham setelah baca blog kang ismet hehhehttps://www.kang-ismet.com/2013/11/css-position-property-dan-valuenya.html
    1. Namanya juga pakai ai mas hehehehe
  2. mas itu view counternya ko error 0 aja ga nambah
    1. Masih uji coba mas
1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.