Pendahuluan

Dalam pengembangan web, jika Anda ingin mencentang teks hanya ketika teks tersebut muat dalam satu baris dan menjaga teks tersebut terletak di sebelah kiri ketika terbentang menjadi beberapa baris, Anda dapat dengan mudah mencapai ini dengan teknik CSS yang tepat. Artikel ini memperkenalkan cara memusatkan teks dalam CSS hanya ketika teks tersebut muat dalam satu baris.

Pendekatan Modern

Salah satu metode untuk melakukan tugas ini memanfaatkan kemampuan modern CSS. Melalui dua baris kode sederhana, Anda dapat mencapai efek yang diinginkan. Properti CSS yang terlibat adalah margin-inline: auto dan max-inline-size: max-content. Berikut adalah contoh kode:

.text {
  margin-inline: auto;
  max-inline-size: max-content;
}

max-inline-size: max-content memastikan ukuran maksimum elemen sejajar dengan ukuran kontennya. margin-inline: auto berperilaku seperti margin-left: auto; margin-right: auto;, memungkinkan untuk memusatkan elemen tersebut.

Metode Alternatif

Alternatifnya, Anda dapat mencapai efek yang sama dengan menggunakan beberapa properti CSS yang telah tersedia dalam beberapa waktu. Pendekatan ini berguna jika Anda bekerja dengan versi CSS yang lebih lama atau jika properti modern tidak didukung. Implementasinya sebagai berikut:

.text {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: left; /* Use this if the parent element has text-align: center applied */
}

Mekanisme di balik pendekatan ini meliputi:

• Menentukan display: table untuk suatu elemen menyesuaikan lebar elemen berdasarkan kontennya. Akibatnya, untuk teks pendek, lebar elemen tersebut menjadi sempit.
• Elemen tabel dipusatkan secara horizontal dengan mengatur kedua margin-left dan margin-right menjadi auto. Ini juga dapat dinyatakan sebagai margin-inline: auto.
• Ketika text-align: left diatur, teks tetap terletak di sebelah kiri ketika terbentuk menjadi beberapa baris.