Cara Membuat Tulisan Rata Tengah di Halaman Website Dengan CSS

Cara Membuat Tulisan Rata Tengah di Halaman Website Dengan CSS – Buat elemen HTML Anda sesuai dengan aturan CSS ini.

Jika Anda baru dalam pengembangan front-end, perbedaan antara apa yang dihasilkan dokumen HTML biasa di browser Anda dan kenyataan seperti apa tampilan situs web modern dapat tampak sangat menakutkan.

Salah satu hal pertama yang mungkin Anda perhatikan adalah bahwa semua teks HTML Anda disejajarkan di sebelah kiri halaman web Anda secara default. Meskipun tidak ada metode praktis untuk menyelaraskan teks Anda di tengah dalam HTML, ada properti CSS yang dapat melakukannya dengan mudah.

Dalam artikel tutorial ini, Anda akan mempelajari cara menyelaraskan teks di tengah halaman web menggunakan CSS.

Apa Itu Properti Perataan Teks CSS?

Properti text-align CSS adalah fitur CSS yang digunakan untuk mengatur teks pada halaman web. Properti ini dapat diberikan salah satu dari beberapa nilai tergantung pada tata letak yang ingin Anda capai di halaman web Anda. Properti perataan teks CSS sering diberi nilai berikut.

  • Kiri (menyejajarkan teks ke kiri halaman web dan juga merupakan perataan default)
  • Kanan (menyejajarkan teks di sebelah kanan halaman web)
  • Center (menyejajarkan teks ke tengah halaman web)
  • Justify (memastikan bahwa setiap baris teks memiliki lebar yang sama)

Menyelaraskan Teks di Tengah Halaman Web

Mengingat bahwa sebagian besar bahasa dibaca dari kiri ke kanan, menyelaraskan teks ke kiri halaman web secara default adalah praktis. Namun, akan ada contoh ketika teks perataan tengah merupakan pendekatan yang lebih praktis (seperti heading dan subheading).

Contoh Halaman Web HTML Sederhana


<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Alignment</title>
</head>

<body>
<div class="container">
<div id="box-1">
<h1>Heading</h1>
<h3>Lorem ipsum, dolor sit amet consectetur adipisicing </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?</p>
</div>
<div id="box-2">
<h1>Heading</h1>
<h3>Lorem ipsum, dolor sit amet consectetur adipisicing </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?</p>
</div>
</div>
</body>
</html>

File HTML di atas akan menghasilkan halaman web berikut di browser Anda.

Seperti yang Anda lihat dari output di atas, semua teks disejajarkan ke kiri. Ada beberapa metode yang dapat Anda gunakan untuk meratakan tengah teks di atas, tetapi pertama-tama, Anda perlu mengidentifikasi teks mana yang ingin Anda ratakan tengah.

Jika tujuannya adalah untuk memusatkan semua teks di halaman web Anda, maka kode berikut akan menyelesaikannya.

Rata Tengah Semua Contoh Teks


.container{
text-align: center;
}

Kode CSS di atas menggunakan properti kelas untuk menargetkan semua teks di halaman web, dan ini hanya mungkin karena ada tag <div> induk dengan kelas penampung yang menyertakan semua teks di halaman web. Kode akan menghasilkan output berikut di browser Anda.

Seperti yang Anda lihat, semua teks di halaman web sekarang rata tengah. Satu-satunya masalah adalah paragraf akan terlihat lebih baik dan lebih mudah dibaca jika disejajarkan ke kiri. Dalam kasus ketika Anda hanya ingin meratakan tengah beberapa teks pada halaman web, Anda dapat menggunakan elemen HTML sebagai pemilih, bukan kelas dan id.

Center Aligning Contoh Teks Tertentu


h1, h3{
text-align: center;
}

Kode di atas hanya menargetkan elemen h1 dan h3 pada halaman web, dan akan menghasilkan output berikut di browser Anda.

Menyelaraskan Tengah Div Pada Halaman Web

Tren lain yang mungkin Anda perhatikan di antara situs web modern adalah bahwa teks tidak sampai ke tepi. Ini adalah salah satu contoh ketika div induk digunakan. Meskipun tidak ada properti div align di CSS, properti margin dapat digunakan untuk menyelaraskan div induk dan kontennya.

Contoh Div Penyelarasan Tengah


.container{
max-width: 920px;
margin: auto;
}

Kode di atas melakukan beberapa hal. Pertama, ia menetapkan lebar untuk semua konten di halaman web, menggunakan kelas div induk. Anda harus selalu menggunakan properti max-width alih-alih properti width saat menempatkan konten situs web ke dalam wadah, karena ini memfasilitasi respons dengan menentukan lebar maksimum alih-alih lebar tetap.

Kode di atas juga menggunakan properti margin untuk menempatkan div induk di tengah halaman web, menghasilkan output berikut di browser.

Seperti yang Anda lihat dari gambar di atas, lebar teks telah dikurangi menjadi 920px, dan wadah tak terlihat yang menutupi teks sekarang berada di tengah halaman web berkat properti margin.

Bagaimana Cara Kerja Properti Margin?

Properti margin dapat diberikan kombinasi dari tiga nilai yang berbeda. Ketika empat nilai ditetapkan ke properti CSS, setiap nilai akan menargetkan salah satu dari empat sisi elemen HTML.

Ketika dua nilai ditetapkan ke properti margin, nilai pertama akan menargetkan sisi atas dan bawah elemen HTML dan nilai kedua akan menargetkan sisi kiri dan kanan elemen HTML.

Pada contoh di atas, properti margin hanya diberi satu nilai yang berarti menargetkan sisi kiri dan kanan elemen HTML (yang dalam hal ini adalah tag <div> induk ).

Properti margin biasanya diberi nilai dalam satuan piksel atau, seperti dalam contoh di atas, nilai otomatis . Nilai otomatis memastikan bahwa margin yang digunakan di kedua sisi elemen HTML adalah sama. Ini secara efektif menempatkan elemen induk div (dan dengan ekstensi teks) di tengah halaman web, memberi Anda tata letak yang mencerminkan halaman web modern.

Apa yang Dapat Anda Lakukan Sekarang

Artikel tutorial ini mengajarkan Anda beberapa hal:

  • Cara menggunakan properti text-align untuk memusatkan teks pada halaman web.
  • Cara menyelaraskan tengah kelompok teks yang berbeda yang diapit oleh tag <div> atau elemen HTML lainnya.
  • Cara memusatkan sekelompok teks menggunakan properti margin pada div induk.

Namun, ini hanya puncak gunung es yang berkaitan dengan alat CSS yang dapat digunakan untuk mengatur tata letak situs web Anda. Salah satu properti CSS paling populer yang dapat digunakan untuk secara khusus memetakan tata letak struktural halaman web Anda (termasuk teks perataan tengah) adalah Grid CSS.

CSS Grid menyediakan struktur tata letak dua dimensi (baris dan kolom) untuk halaman web Anda, dengan kerangka kerja yang mudah dipelajari dan digunakan.