Cara Membuat Teks Rata Tengah di HTML

Disusun bersama Staf wikiHow

Unduh PDF

Artikel wikiHow ini akan mengajarkan kepada Anda cara membuat teks rata tengah pada situs web HTML menggunakan Cascading Style Sheets atau CSS. Perataan tengah pada HTML sendiri sebenarnya dapat dilakukan dengan penanda <center>, tetapi penanda tersebut sekarang dianggap sudah tertinggal dan tidak lagi bekerja pada sebagian besar peramban.^{[1] X Teliti sumber}

Metode 1

Metode 1 dari 2:

Menggunakan CSS

Unduh PDF

1
Buka berkas yang memuat kode gaya CSS. Meskipun penanda <center> sudah dianggap kuno, Anda bisa membuat elemen baru yang berfungsi meratatengahkan teks untuk ditambahkan pada halaman sesuai batas atau marginnya. Jika Anda tidak memiliki berkas CSS terpisah, carilah kode gaya di bagian atas berkas HTML, di antara penanda "<style>" dan "</style>".^{[2] X Teliti sumber}
- Jika Anda tidak memiliki penanda <style> dan </style>, tambahkan tepat di bawah <body> di bagian atas berkas seperti berikut:
  <!DOCTYPE html> <html> <body> <style> </style>
2
Buatlah kelas kode yang berfungsi membuat teks rata tengah. Penanda <div> berfungsi memerintahkan dokumen HTML untuk mengacu kepada segmen teks tertentu sehingga Anda perlu membuat kelas untuk penanda tersebut. Tikkan kode berikut pada spasi di antara penanda "style" dan pastikan Anda menekan tombol ↵ Enter dua kali setelah baris pertama:
```
div.a {

}
```
3
Tambahkan properti text-align. Tikkan text-align: center; pada spasi di antara dua kurung kurawal di segmen div.a. Bagian kepala dokumen akan tampak seperti berikut:
```
<!DOCTYPE html>
<html>
<body>
<style>
div.a {
	text-align: center;
}
</style>
```
4
Tambahkan penanda div yang sesuai pada teks yang ingin Anda jadikan rata tengah. Tempatkan penanda <div class="a"> di atas teks yang diinginkan dan tutup dengan penanda </div> di bagian bawahnya. Sebagai contoh, untuk menjadikan judul dan teks paragraf rata tengah, masukkan kode berikut:
```
<div class="a">

<h1>Selamat Datang di Halamanku!</h1>
<p>Situs web ini bertujuan memberikan informasi mengenai berbagai hal.</p>

</div>
```
5
Gunakann penanda div.a untuk membuat elemen atau bagian lain rata tengah. Untuk meratatengahkan elemen lain (mis. konten di antara penanda <p></p> dan <h2></h2>), tikkan <div class="a"> sebelum elemen dan </div> setelahnya. Karena Anda sudah memiliki penanda "div.a" yang ditujukan sebagai perintah perataan tengah, penanda tersebut akan langsung meratatengahkan teks seperti sebelumnya:
```
<style>
div.a {
	text-align: center;
}
</style>


<div class="a">

<h2>Kami Menerima Sumbangan</h2>
<p>Sumbangan akan sangat diapresiasi</p>

</div>
```
6
Tinjau dokumen. Meskipun kontennya berbeda, dokumen Anda kurang lebih akan tampak seperti ini:^{[3] X Teliti sumber}
```
<!DOCTYPE html>
<html>
<body>
<style>
div.a {
	text-align: center;
}
</style>

<div class="a">
<h1>Selamat Datang di Halamanku!</h1>
<p> Situs web ini bertujuan memberikan informasi mengenai berbagai hal.</p>
</div>

<div class="a">
<h2>Kami Menerima Sumbangan</h2>
<p>Sumbangan akan sangat diapresiasi</p>
</div>

</body>
</html>
```
Iklan

Metode 2

Metode 2 dari 2:

Menggunakan Penanda “Center” pada HTML

Unduh PDF

1

Buka dokumen HTML. Metode ini menunjukkan cara menggunakan penanda <center> pada HTML, yang sekarang sudah dianggap kuno. Sejak bulan Desember 2018, penanda ini masih bekerja pada beberapa peramban web. Namun, Anda tidak disarankan untuk bergantung kepada penanda ini untuk jangka panjang.
Geser layar hingga Anda menemukan judul, paragraf, atau teks lain yang ingin diratatengahkan.
3
Tambahkan penanda "center" pada kedua sisi teks. Penanda ini memiliki format <center>tulisan</center>, dengan "tulisan" mengacu kepada teks yang ingin dijadikan rata tengah. Jika teks sudah memiliki penanda sebelumnya (mis. "<p></p>" untuk teks paragraf), penanda "center" dapat ditempatkan di luar penanda yang sudah ada:
```
<center><h1>Selamat Datang di Situsku!</h1></center>
<center>Anggaplah rumah sendiri!</center>
```
4
Tinjau dokumen HTML. Dokumen Anda akan tampak seperti ini:^{[4] X Teliti sumber}
```
<!DOCTYPE html>
<html>
<body>

<h1><center>Selamat Datang di Situsku!</center></h1>
<center>Anggaplah rumah sendiri!</center>
<p1>Situs ini bertujuan menampilkan informasi mengenai berbagai hal.</p1>

</body>
</html>
```
Iklan