Buatlah file bernama textcenter.html lalu copy paste skrip dibawah ini :
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>test</title><style>p{text-align: center;}ul li{text-align: center;}div{background-color: blue;float: left;text-align: center;}</style></head><body><center><h1>Hello World</h1></center><p>Hello World.</p><ul><li>Hello World.</li><li>Hello World</li></ul><div>Hello WORLD</div></body></html>
Setelah itu coba buka filenya, nanti akan diarahkan ke browser default kalian, dan bisa lihat hasilnya, teks sudah berhasil berada di tengah.. loh kenapa yang div nggak? karena yang dipentingkan adalah posisi float dari elementnya terlebih dahulu disamping teks yang berada didalamnya..
coba hapus
background-color: blue;
float: left;
otomatis teks akan berada ditengah karena tidak ada yang mencegah (prevent).
2. MEMBUAT ELEMEN BERADA DI TENGAH PADA HTML DAN CSS
Buatlah file bernama element.html lalu copy paste skrip dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.block{
height:50px;
max-width: 50px;
background-color:blue;
margin: 10px auto;
}
</style>
</head>
<body>
<div class="block">
</div>
</body>
</html>
Elemen divnya berhasil dibuat ditengah dengan menggunakan perantara atribut 'class' lalu
menggunakan margin: 0px auto; untuk membuat elemen tersebut berada ditengah.
jika kalian ganti margin nya dengan text-align:center; tidak akan berjalan dengan baik dan malah membuat teks berada di kiri.
Jadi sekian saja tutorialnya ... lain kali saya share juga apa itu class pada html , width height, dan margin.
Wasalammualaikum warahmatullahi wabarakatuh.. See you on next post!
0 comments:
Post a Comment