Cara Meletakan Gambar dan Objek HTML ke Tengah menggunakan CSS

CSS adalah cara terbaik untuk memusatkan gambar maupun elemen html agar berada di tengah.

Sebenarnya ada banyak cara untuk meletakan Objek html ke tengahi. Namun disini saya lebih bertaut pada CSS karena lebih mudah di gunakan dan tentu lebih familiar.

Pada level ter tinggi, Anda dapat menggunakan CSS untuk:

  • Meletakan Teks ke tangah.
  • memuusatkan elemen level blok (seperti divisi)
  • Memusatkan gambar.
  • Menengahkan blok atau gambar secara vertikal

Memusatkan Teks Dengan CSS

Anda hanya perlu mengetahui satu properti style untuk memusatkan teks pada halaman :

.center {
text-align: center;
}

Dengan baris CSS ini, setiap paragraf yang ditulis dengan class .center akan dipusatkan secara horizontal di dalam elemen induknya. Misalnya, paragraf di dalam sebuah divisi (anak dari divisi itu) akan dipusatkan secara horizontal di dalam. <div>.

Berikut adalah contoh class yang diterapkan di dokumen HTML:

<p class="center">This text is centered.</p>

Saat memusatkan teks dengan properti text-align, ingat bahwa itu akan dipusatkan di dalam elemen penampungnya dan tidak harus dipusatkan dalam halaman penuh itu sendiri.

Memusatkan Blok Konten Dengan CSS

Blok konten dibuat dengan menggunakan elemen
HTML. Cara paling umum untuk memusatkan blok dengan CSS adalah dengan mengatur margin kiri dan kanan menjadi otomatis.

.center {
margin: auto;
width: 80em;
}

Singkatan CSS untuk properti margin ini akan mengatur margin atas dan bawah menjadi nilai 0, sedangkan kiri dan kanan akan menggunakan “auto.” Ini pada dasarnya membutuhkan ruang apa pun yang tersedia dan membaginya secara merata di antara kedua sisi jendela viewport, yang secara efektif memusatkan elemen pada halaman

Ini contoh penerapan di HTML:

<div class="center">This entire block is centered,
but the text inside it is left aligned.</div>

Selama blok Anda memiliki lebar yang ditentukan, itu akan berpusat di dalam elemen penampung. Teks yang ada di dalam blok itu tidak akan berada di tengah tetapi akan diratakan ke kiri. Ini karena teks rata kiri sebagai default di browser web. Jika Anda ingin teks juga berada di tengah, Anda bisa menggunakan properti text-align yang dibahas sebelumnya dalam hubungannya dengan metode ini untuk memusatkan divisi.

Memusatkan Gambar ke Tengah Dengan CSS

Meskipun sebagian besar browser akan menampilkan gambar di tengah menggunakan properti text-align yang sama, itu tidak direkomendasikan oleh W3C. Oleh karena itu, selalu ada kemungkinan versi browser mendatang dapat memilih untuk mengabaikan metode ini.

Alih-alih menggunakan text-align untuk menengahkan gambar, Anda harus memberi tahu browser secara eksplisit bahwa gambar tersebut adalah elemen level blok. Dengan cara ini, Anda dapat memusatkannya seperti yang Anda lakukan pada blok lainnya. Inilah CSS untuk Penerapan nya :

img.center {
display: block;
margin-left: auto;
margin-right: auto;
}

Dan berikut adalah HTML untuk gambar yang akan dipusatkan:

<img src="blwebcam-sample.jpg" alt="Suni" class="center">

Anda juga dapat memusatkan objek menggunakan inline CSS (lihat di bawah), tetapi pendekatan ini tidak disarankan karena menambahkan gaya visual ke markup HTML Anda. Ingat, gaya dan struktur harus terpisah; menambahkan gaya CSS ke HTML akan merusak pemisahan itu dan, oleh karena itu, Anda harus menghindarinya

<div style="text-align: center;">

Memusatkan Elemen Secara Vertikal Dengan CSS

Memusatkan objek secara vertikal selalu menjadi tantangan dalam desain web, modul tata letak kotak fleksibel CSS di CSS3 menyediakan cara untuk melakukannya.

Perataan vertikal berfungsi serupa dengan perataan horizontal yang dibahas di atas. Properti CSS adalah perataan vertikal, seperti itu

.vcenter {
vertical-align: middle;
}

Semua browser modern mendukung gaya CSS ini. Jika Anda memiliki masalah dengan browser yang lebih lama, W3C merekomendasikan agar Anda memusatkan teks secara vertikal dalam wadah. Untuk melakukannya, tempatkan elemen di dalam elemen penampung, seperti div, dan minimum di atasnya. gunakan elemen width sebagai sel tabel, dan setel perataan vertikal ke “middle.”

Misalnya, inilah CSS:

.vcenter {
min-height: 12em;
display: table-cell;
vertical-align: middle;
}

Dan inilah HTML-nya:

<div class="vcenter">
<p>This text is vertically centered in the box.</p>
</div>

Dan itulah kode CSS yang bisa anda gunakan untuk penerapan dalam kode html anda, semoga bisa bermanfaat dan berguna

1 Shares:
Leave a Reply

Your email address will not be published.

You May Also Like