Inilah Cara Membuat Tulisan Rata Tengah di Halaman Website Menggunakan CSS – Buat elemen HTML kalian sesuai dengan aturan CSS berikut.
Jika kalian masih baru dalam pengembangan front-end, perbedaan antara apa yang dihasilkan dokumen HTML biasa di browser kalian dan kenyataan seperti apa tampilan situs web modern bisa tampak sangat menakutkan.
Salah satu hal pertama yang mungkin kalian perhatikan yaitu bahwa semua teks HTML kalian disejajarkan di sebelah kiri halaman web kalian secara default. Meski tidak ada metode praktis untuk menyelaraskan teks kalian di tengah dalam HTML, ada properti CSS yang bisa melakukannya dengan mudah.
Pada artikel ini, kalian akan mempelajari cara untuk menyelaraskan teks di tengah halaman web menggunakan CSS.
Apa yang Dimaksud dengan Properti Perataan Teks CSS?
Properti text-align CSS merupakan fitur CSS yang digunakan untuk mengatur teks pada halaman web. Properti ini bisa diberikan salah satu dari beberapa nilai tergantung pada tata letak yang ingin kalian capai pada halaman web kalian. Biasanya properti perataan teks CSS diberi nilai seperti berikut.
- Kiri (untuk menyejajarkan teks ke kiri halaman web dan juga merupakan perataan default)
- Kanan (untuk menyejajarkan teks di sebelah kanan halaman web)
- Center (untuk menyejajarkan teks ke tengah halaman web)
- Justify (untuk memastikan bahwa setiap baris teks mempunyai lebar yang sama)
Menyelaraskan Teks di Tengah Halaman Web
Dengan mengingat bahwa sebagian besar bahasa dibaca dari kiri ke kanan, maka menyelaraskan teks ke kiri halaman web secara default termasuk praktis. Tetapi, akan ada contoh saat 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>
Dengan File HTML yang ada di atas, maka akan menghasilkan halaman web berikut di browser kalian.
Seperti yang kalian lihat dari output di atas, bahwa semua teks disejajarkan ke kiri. Terdapat beberapa metode yang bisa kalian gunakan untuk meratakan tengah teks di atas, tetapi pertama-tama, kalian harus mengidentifikasi dulu teks mana yang ingin kalian ratakan tengah.
Jika tujuan kalian untuk memusatkan semua teks di halaman web kalian, maka kalian bisa menggunakan kode berikut.
Rata Tengah Semua Contoh Teks
.container{
text-align: center;
}
Kode CSS di atas menggunakan properti kelas yang gunanya untuk menargetkan semua teks di halaman web, dan ini hanya mungkin dikarenakan ada tag <div> induk dengan kelas penampung yang menyertakan semua teks di halaman web. Maka kode akan menghasilkan output berikut di browser kalian.
Seperti yang kalian lihat, bahwa semua teks di halaman web sekarang rata tengah. Satu-satunya masalah yaitu paragraf akan terlihat lebih baik dan juga lebih mudah dibaca jika disejajarkan ke kiri. Dalam kasus saat kalian hanya ingin meratakan tengah beberapa teks pada halaman web, kalian bisa menggunakan elemen HTML sebagai pemilih, bukan kelas dan id.
Center Aligning Contoh Teks Tertentu
h1, h3{
text-align: center;
}
Kode di atas hanya akan menargetkan elemen h1 dan h3 pada halaman web, dan nantinya akan menghasilkan output berikut di browser kalian.
Menyelaraskan Tengah Div Pada Halaman Web
Tren lainnya yang mungkin kalian perhatikan di antara situs web modern yaitu bahwa teks tidak sampai ke tepi. Ini merupakan salah satu contoh saat div induk digunakan. Meski tidak ada properti div align di CSS, properti margin bisa digunakan untuk menyelaraskan div induk dan kontennya.
Contoh Div Penyelarasan Tengah
.container{
max-width: 920px;
margin: auto;
}
Kode di atas melakukan beberapa hal. Pertama-tama, ia akan menetapkan lebar untuk semua konten di halaman web, menggunakan kelas div induk. Kalian harus selalu menggunakan properti max-width alih-alih properti width pada saat menempatkan konten situs web ke dalam wadah, karena ini memfasilitasi respons dengan menentukan lebar maksimum alih-alih lebar tetap.
Dan kode di atas juga menggunakan properti margin untuk menempatkan div induk di tengah halaman web, akan menghasilkan output berikut di browser kalian.
Seperti yang kalian lihat pada gambar diatas, lebar teks telah dikurangi menjadi 920px, dan wadah tidak terlihat yang menutupi teks sekarang berada di tengah halaman web berkat properti margin.
Bagaimana Cara Kerja Properti Margin?
Properti margin bisa diberikan kombinasi dari tiga nilai yang berbeda. Pada saat empat nilai ditetapkan ke properti CSS, maka setiap nilai akan menargetkan salah satu dari empat sisi elemen HTML.
Saat dua nilai ditetapkan ke properti margin, maka 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 diberikan satu nilai yang artinya menargetkan sisi kiri dan kanan elemen HTML (yang dalam hal ini adalah tag <div> induk ).
Biasanya properti margin diberi nilai dalam satuan piksel atau, seperti dalam contoh di atas, nilai otomatis. Nilai akan otomatis memastikan bahwa margin yang digunakan di kedua sisi elemen HTML itu sama. Ini secara efektif akan menempatkan elemen induk div (dan dengan ekstensi teks) di tengah halaman web, memberikan kalian tata letak yang mencerminkan halaman web modern.
Apa yang Bisa Kalian Lakukan Sekarang
Artikel ini mengajarkan kalian beberapa hal yaitu:
- Cara menggunakan properti text-align untuk memusatkan teks pada halaman web.
- Cara menyelaraskan tengah kelompok teks berbeda yang diapit oleh tag <div> atau elemen HTML lain.
- Cara untuk memusatkan sekelompok teks menggunakan properti margin pada div induk.
Tetapi, ini hanyalah puncak gunung es yang berkaitan dengan alat CSS yang bisa kalian gunakan untuk mengatur tata letak situs web kalian. Salah satu properti CSS yang paling populer yang bisa kalian gunakan untuk secara khusus memetakan tata letak struktural halaman web kalian (termasuk teks perataan tengah) yaitu Grid CSS.
CSS Grid ini menyediakan struktur tata letak 2D (baris dan kolom) untuk halaman web kalian, dengan kerangka kerja yang mudah dipelajari dan mudah digunakan.