CSS Posisi Teks di Tengah Secara Vertikal dan Horizontal

Tabel Konten
  1. CSS 
  2. Markup HTML 

CSS 

div {
  width:100px; /* dimensi lebar */
  height:100px; /* dimensi tinggi */
  line-height:100px; /* sama dengan tinggi elemen, posisi di tengah secara vertikal */
  text-align:center; /* posisi di tengah secara horizontal */
  background-color:maroon;
  color:white;
}

Markup HTML 

<div>ABC</div>

15 Komentar

  • IRIL SAGITA

    Hasilnya bagaimana ni kak ?

  • Beben Koben

    kuncinya ada di varibael
    line-height: ;

  • Unknown

    klo saya menggunakan metode seperti ini jika membuat menu navigasi yang satu baris..

    • Taufik Nurrohman

      Menentukan line-height juga bisa menyingkat beberapa deklarasi CSS pada menu navigasi, terutama soal padding. Dengan menentukan line-height dan height, maka kita tidak perlu lagi mengeset padding-top dan padding-bottom, cukup padding-left dan padding-right. Teks sudah tertata di tengah secara vertikal:

      nav {
      font:normal bold 11px/30px Arial,Sans-Serif; /* line-height disatukan dengan font-size */
      height:30px;
      background-color:black;
      }
      nav ul,
      nav li {
      margin:0 0;
      padding:0 0;
      list-style:none;
      }
      nav li {
      float:left;
      display:inline;
      }
      nav a {
      display:block;
      text-decoration:none;
      color:white;
      /* cuma butuh padding-left dan padding-right */
      padding-left:15px;
      padding-right:15px;
      }
      nav a:hover {background-color:darkblue}
      <nav>
      <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Archive</a></li>
      <li><a href="#">Contact</a></li>
      </ul>
      </nav>

      line-height juga bisa disatukan dengan font (disatukan dengan ukuran huruf):

      /* font:font-style font-weight font-size/line-height font-family */
      font:italic bold 12px/30px Serif;
      • Unknown

        iya mas css paddingx jd lebih sdikit..
        wah saya baru tahu klo cara penggabungan css font ternyata begitu...
        dapat lagi sedikit ilmu..

  • Adi Nugraha Y

    kalo pake satuan % pada line-height bisa tak mas ? :\ misalkan line-height: 50%; atau 20% gitu....

    • Taufik Nurrohman

      Kalau tujuannya untuk memposisikan teks di tengah secara vertikal, satuan harus disamakan dengan satuan area, tapi kalau masalah apakah line-height bisa memakai satuan persen atau tidak, jawabannya bisa. 100% artinya sama dengan tinggi huruf.

  • Unknown

    Mas Bagaimana kalo yang diposisikan ditengah itu bukan text
    contohnya meletakkan gambar di tengah2
    bagaimana caranya mas ? :-bd

  • Yowanda Erlangga

    Gan kalo mau buat tulisan jadi vertikal gimana ya ?
    http://typepedia.blogspot.com/2015/05/synthesis-development-indonesia-developer-property.html

  • Go Hermes

    Google Hermes++
    makasih bosss
    saya coba deh

  • Unknown

    klo misalkan teks nya dinamic misalkan judul.. kadang 1 baris kadang 2 baris atau malah 3 baris... tp saya ingin posisinya selalu di tengah. sedangkan elemen pembungkusnya ukurannya fixs...
    ada saran ga master..??
    sebagai gambaran
    ?div id="bungkus"??h1?judul kadang satu baris kadanglebih?/h1??div?
    ukuran bungkusnya fiks misal
    #bungkus {width:200px; height:80px;}

    terimakasi sebelumnya.. n_n

  • Wong Makassar

    thanks gan :v

Komentar telah ditutup.