CSS Align

Pelajari berbagai teknik untuk menyelaraskan elemen secara horizontal dan vertikal menggunakan CSS.

CSS Layout - Horizontal & Vertical Align

CSS menyediakan beberapa metode untuk menyelaraskan elemen secara horizontal dan vertikal tergantung pada konteksnya. Berikut beberapa teknik umum:

Horizontal Align (Penjajaran Horizontal)

1. `text-align` (untuk konten inline di dalam elemen block)

<style>
  .center-text {
    text-align: center;
    border: 1px solid #ccc;
  }
</style>
 
<div class="center-text">
  <p>Ini adalah teks yang diratakan ke tengah.</p>
</div>

2. `margin: auto` (untuk elemen block dengan lebar tetap)

<style>
  .center-block {
    width: 200px;
    margin: auto;
    background: lightblue;
  }
</style>
 
<div class="center-block">Box di tengah</div>

Vertical Align (Penjajaran Vertikal)

1. Flexbox (cara modern dan fleksibel)

<style>
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    border: 1px solid #ccc;
  }
</style>
 
<div class="flex-center">
  <p>Konten di tengah</p>
</div>

2. `vertical-align` (untuk elemen inline dan table-cell)

<style>
  .container {
    display: table-cell;
    vertical-align: middle;
    height: 200px;
    width: 100%;
    border: 1px solid #ccc;
  }
</style>
 
<div class="container">
  <p>Vertikal align dengan table-cell</p>
</div>

Kesimpulan

Metode	Horizontal	Vertikal	Modern
`text-align`	✅	❌	❌
`margin: auto`	✅	❌	❌
`vertical-align`	❌	✅	❌
`display: flex`	✅	✅	✅

CSS Align

On this page