Dalam tutorial ini kita akan melihat bagaimana cara memusatkan gambar dengan HTML dan CSS. Ini tidak rumit dan kita sering membutuhkannya untuk halaman web kita. Kami akan melihat beberapa opsi, yang hanya kami gunakan HTML, yang lain melalui penggunaan CSS dan akhirnya menggunakan Bootstrap.
HTML dan CSS adalah dua bahasa utama protagonis skrip web dalam dunia pembuatan halaman web dan aplikasi. Kedua bahasa bekerja bersama dalam tugas ini. Sementara HTML memberikan struktur ke halaman web, CSS menangani gaya dan bagian visual atau auditori. HTML menyediakan label yang mengelilingi elemen-elemen berbeda dari sebuah halaman dan dengan cara ini bersama-sama dengan atribut, kami akan membuat kerangka situs web kami.
Perbedaan antara HTML dan CSS
Untuk meringkas kita dapat melihat perbedaan antara HTML dan CSS sebagai berikut:
- HTML lebih mudah dipelajari dan diimplementasikan
- HTML Tersedia dalam berbagai bahasa
- HTML ringan dan efektif
- HTML memiliki keamanan yang terbatas
- HTML agak lambat.
- CSS memiliki pustaka atribut dan gaya yang lebih besar dari CSS
- CSS meningkatkan waktu pemuatan halaman.
- CSS memiliki kompatibilitas yang hebat dan perawatan yang mudah.
- CSS memberikan beberapa masalah kinerja
- CSS tidak memiliki keamanan terintegrasi
Hal yang direkomendasikan hari ini adalah melakukan langkah-langkah secara langsung dengan CSS tetapi jika Anda lebih dari HTML Anda dapat mengandalkan opsi berikut juga.
1. Cara memusatkan gambar di halaman web menggunakan HTML saja
Meskipun membuat opsi ini untuk memusatkan gambar dengan HTML, kita akan melihat dua cara untuk melakukannya dengan mudah.
Gambar tengah dengan HTML dan tag tengah
Dalam opsi sederhana ini hanya membungkus gambar dengan tag tengah
- Bagian "src" digunakan untuk menunjukkan arah rute gambar.
- Bagian alt memberikan informasi ke situs web tentang nama gambar.
Selain itu, kami harus menetapkan tinggi dan lebar gambar seperti ini:
height = ”250” width = 200 ”
Gambar tengah dengan HTML dan tengah
Tetapi sehubungan dengan gambar-gambar ini konsep center yang telah kita lihat berbeda dan lebih baik menggunakan alignment tengah, jadi kodenya tetap sebagai berikut:
Jika kami juga menambahkan teks, kami akan memiliki kode ini:
Contoh ini adalah untuk memusatkan gambar dengan teks HTML.
Sejajarkan gambar dengan HTML dengan atribut rata
Jika kita ingin menyelaraskan gambar secara horizontal, kita dapat melakukannya dengan cara yang mirip dengan apa yang kita lakukan dengan teks, yaitu, gunakan atribut menyelaraskan dalam tag
atau
. Kami akan membuat kode tempat atribut muncul dengan tag gambar. Tag adalah salah satu yang menerima atribut pelurusan tetapi penggunaannya berbeda.
Tapi seperti yang kita katakan, labelnya
Di sini kita akan meletakkan teks yang akan mengisi seluruh bagian kanan dan membungkus gambar yang telah kita tempatkan. Kami terus mengisi teks solvetic solvetic solvetic
Kami akan melakukan hal yang sama untuk menyelaraskan teks dan gambar ke kanan di sebelah kiri, tetapi gantikan "kiri" untuk "kanan".
Tidak disarankan, karena aspek penempatan dan gaya kita harus meninggalkannya untuk CSS dan tidak menggunakannya secara langsung dalam HTML. Dengan cara ini kita akan memiliki kode yang lebih mudah untuk dipertahankan dan diubah, tetapi jika suatu saat Anda membutuhkannya untuk tes kecil dan cepat, perlu diketahui.
2. Cara memusatkan gambar pada halaman web dengan CSS
Di sini kita akan memiliki kode HTML dan kode CSS. Kami mulai menonton HTML.
Kami telah menempatkan kelas pada gambar, yang disebut terpusat, dan itu akan membantu kami untuk kemudian menatanya dalam CSS. Selanjutnya, ada kode untuk memusatkan gambar.
. central {margin: 10px otomatis; display: blok; } Kami juga dapat menggunakan kode berikut untuk menyelaraskan gambar menggunakan CSS untuk situs web kami: .central {margin-left: auto; margin-right: otomatis; } Jika ini tidak bekerja untuk Anda di browser karena formulir pemusatan teks digunakan, kami harus menunjukkan browser bahwa gambar adalah elemen tingkat blok. Dengan cara ini kita dapat memusatkannya seolah-olah itu adalah blok lain. Kami akan menggunakan kode ini:$config[ads_text6] not foundKami membuat elemen ditampilkan dalam blok, dan kami memberinya margin otomatis (cukup bahwa margin otomatis di sisi, atas dan bawah Anda dapat menempatkan yang Anda inginkan). Perlu diingat bahwa jika gambar menempati seluruh lebar itu tidak akan berada di tengah.
img.center {display: block; margin-left: auto; margin-right: otomatis; } 3. Cara memusatkan gambar halaman web menggunakan Bootstrap
Dengan kerangka kerja populer ini, semuanya lebih sederhana, itu akan cukup untuk menempatkan kelas blok-tengah pada gambar.
Anda harus mengunduh Bootstrap dan menautkannya atau memasukkan CDN Anda ke HTML kami, untuk ini saya tinggalkan tautan Anda di bawah:
UNDUH BOOTSTRAP
Kita dapat melihat hasil dari penerapan kode-kode ini dengan gambar di bawah ini:
$config[ads_text5] not found
Dengan cara ini kita dapat memfokuskan gambar kita pada HTML dan menggunakan CSS dan dengan demikian membuat karya web yang sukses secara estetika.
Pasal