Belajar mengatur css align

belajar css

Apa itu css align ?

Align atau alignment pada CSS digunakan untuk menyelaraskan elemen secara horizontal atau vertikal. Ini tentang design web yang dimana mengatur elemen agar berpusat disuatu titik yang telah ditentukan. Ada beberapa cara untuk menyelaraskan elemen dalam css, silakan simak contoh-contoh dibawah ini:

Elemen align center

Anda bisa memusatkan elemen secara otomatis ditengah atau bisa juga disebut rata kanan dan rata kiri dengan menggunakan property margin: auto;

Dengan begitu elemen akan mengambil width dan mengisi ruang yang tersisa dan akan dibagi sama rata antara kedua margin secara horizontal.

Contoh:

Editor Online
  1. div {
  2. margin: auto;
  3. width: 50%;
  4. background-color: orange;
  5. padding: 15px;
  6. }

Agar berfungsi Anda harus memberikan width pada elemen

Text align center

Anda bisa memusatkan teks ditengah atau bisa juga disebut rata kanan dan rata kiri dengan menggunakan property text-align: center;

Contoh:

Editor Online
  1. #p1 {
  2. text-align: center;
  3. border: 3px solid green;
  4. }

Gambar align center

Anda bisa memusatkan gambar secara otomatis ditengah atau bisa juga disebut rata kanan dan rata kiri dengan menggunakan property margin: auto;

Elemen <img> mempunyai display default yaitu inline, agar berfungsi Anda harus memberinya style display: block;

Contoh:

Editor Online
  1. img {
  2. margin: auto;
  3. display: block;
  4. }

Position left dan right

Anda bisa menyelaraskan elemen agar berpusat disebelah kiri atau kanan dengan menggunakan property position: absolute;

Contoh:

Editor Online
  1. div {
  2. background-color: orange;
  3. padding: 10px 20px;
  4. width: 200px;
  5. }
  6. #right {
  7. position: absolute;
  8. right: 20px;
  9. }
  10. #left {
  11. position: absolute;
  12. left: 20px;
  13. }

Float left dan right

Anda bisa menyelaraskan elemen agar berpusat disebelah kiri atau kanan dengan menggunakan property float: left; dan float: right;

Contoh:

Editor Online
  1. div {
  2. background-color: orange;
  3. padding: 10px 20px;
  4. width: 200px;
  5. }
  6. #right {
  7. float: right;
  8. }
  9. #left {
  10. float: left;
  11. }

Pusat vertikal menggunakan padding

Anda bisa menyelaraskan elemen agar berpusat secara vertikal dengan menggunakan property padding.

Contoh:

Editor Online
  1. div {
  2. padding: 65px 0;
  3. border: 3px solid green;
  4. }

Pusat vertikal menggunakan line-height

Anda bisa menyelaraskan elemen agar berpusat secara vertikal dengan menggunakan property line-height.

Contoh:

Editor Online
  1. div {
  2. line-height: 200px;
  3. height: 200px;
  4. border: 3px solid green;
  5. }
  6. div p {
  7. line-height: 1.5;
  8. display: inline-block;
  9. }

Leave a Reply

Your email address will not be published. Required fields are marked *