CSS: text-align vs margin
CSS: text-align vs margin

CSS: text-align vs margin

- 4

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.

Last update

4 Comments

+ Add
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

Namanya juga pakai ai mas hehehehe
mas itu view counternya ko error 0 aja ga nambah
Masih uji coba mas
Add Comment

Kami memiliki kebijakan dalam berkomentar di Blog ini :

— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan

NB :Komentar yang melanggar tidak akan ditampilkan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini


CSS: text-align vs margin

CSS: text-align vs margin

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