Bak pasir

Memusatkan gambar pada halaman

Perkenalan

1. Memusatkan gambar di tengah halaman dan mengompresinya saat mengubah ukuran browser.

2. Pemusatan gambar secara mutlak, berapa pun ukuran jendela browser.

Idenya didasarkan pada logika berikut:

• Blok luar, .pembungkus, direntangkan ke seluruh lebar dan tinggi bebas.
• unit dalam ruangan, .barang, mengambil lebar dan tinggi gambar yang terletak di dalam, karena merupakan blok sebaris; dan ditempatkan dengan sudut kiri atas di tengah blok induk.
• Menempatkan gambar dalam margin minus, yang seharusnya sejajar tepat di tengah .pembungkus

Saya memutuskan hal ini dengan mengingat transformasi, atau lebih tepatnya fungsi terjemahannya, yang seolah-olah menggeser tampilan suatu objek, namun meninggalkan tempatnya semula. Dan ternyata dengan mengganti margin gambar dengan transform: Translate(-50%, -50%); masalahnya segera teratasi. Dan inilah yang keluar pada akhirnya:

PS: Saya tidak yakin apakah ini satu-satunya pilihan atau tidak. Menurut saya opsi ini tidak cocok untuk semua orang.
Tapi saya tahu pasti bahwa jika mereka cocok untuk kasus saya, maka akan ada orang yang mungkin akan sangat membantu mereka dalam tugas mereka. Selain itu, jika Anda menambahkan sedikit ke kode, Anda dapat menambahkan kruk untuk IE lama, saya tidak menambahkannya karena saya tidak ingin merusak kode bersih demi browser yang sudah ketinggalan zaman.
PS2: Kritik dan saran sangat kami harapkan. Terima kasih telah membaca sampai akhir.

Tag: html, css, css3, gambar, gambar, gambar, perataan, perataan vertikal

Artikel ini tidak dapat dikomentari karena penulisnya belum menjadi anggota penuh komunitas. Anda hanya dapat menghubungi penulis setelah dia menerima undangan dari seseorang di komunitas. Hingga saat ini, nama penggunanya akan disembunyikan dengan nama samaran.

Halo, para pembaca situs saya yang budiman. Hari ini saya akan memberi tahu Anda cara memusatkan gambar di situs web Anda.

Pertama, sedikit teori agar Anda semua paham dari mana kaki Anda berasal. Intinya adalah itu - ini adalah elemen sebaris dan akan lebih tepat jika menyelaraskannya menggunakan atribut align, TAPI! Seperti yang kita ketahui, semakin banyak atribut yang kita masukkan ke dalam kode sebuah situs, maka akan semakin sulit bagi kita untuk mengatur tampilannya. Anda harus terus-menerus mencari atribut-atribut ini dan memperbaikinya.

Sebenarnya, untuk menyederhanakan pekerjaan desain kami, bahasa markup gaya yang disebut Css diciptakan. Dan jika Anda dapat melakukan segalanya dengan lebih sederhana, mengapa tidak memanfaatkannya? Lagi pula, cara yang lebih sederhana untuk menyiapkan dokumen sumber daya web telah lama ditemukan bagi kita, dan sangatlah bodoh jika mengabaikannya dan tidak menerapkannya.

Persetan dengan liriknya, mari kita mulai mencari tahu.

Pertama, mari buat folder pengujian. Saya akan meletakkan index.html, style.css (file dengan gaya) dan file gambar di sana. Selanjutnya, mari buat “kerangka” situs kita di file indeks:

Di Css, penyelarasan elemen biasanya dilakukan menggunakan properti margin. Tapi itu hanya berfungsi untuk elemen blok. Seperti yang sudah saya katakan, - elemen huruf kecil. Bagaimana kita bisa membuat gambar kita terlihat kotak-kotak?

Ada properti tampilan ajaib untuk ini, yang memiliki banyak nilai yang memungkinkan Anda memberi tahu browser cara melihat elemen halaman tertentu. Secara default elemen display:inline;, artinya ini inline. Namun di Css kita bisa mengubah presentasi elemen ini atau itu. Dengan menulis display:block;, kita memberi tahu browser bahwa elemen ini harus diperlakukan sebagai elemen blok. Inilah yang akan kami tulis di file gaya kami.

Selanjutnya kita perlu menentukan margin kita. Nilainya harus "0 otomatis". Dengan demikian, tidak akan ada lekukan di bagian atas dan bawah, dan nilai “auto” berarti lekukan di sepanjang tepinya akan dihitung oleh browser menggunakan rumusnya sendiri. Saya kurang paham perhitungan browsernya, tapi menurut saya sepertinya tidak ada indentasi khusus di kiri dan kanan, tapi disetel ke otomatis. Jika auto adalah sebuah variabel, maka auto di sebelah kanan sama dengan auto di sebelah kiri. Jadi ternyata browser menunda dua jarak yang identik.

Jadi, kami mendapatkan yang berikut ini di file css:

Dengan cara ini kita mendapatkan gambar yang sejajar dengan tengah.

Perlu ditambahkan bahwa jika elemen tidak memiliki lebar tetap, maka elemen tersebut harus dipaksa! Kalau tidak, elemennya tidak akan berada di tengah.

Itu saja. Semoga berhasil dengan tata letak Anda!

P.S: Seperti yang mungkin sudah Anda duga, semua gambar dalam materi ini disejajarkan persis seperti ini.

Secara default, gambar mewarisi properti perataan dari tag induknya, dan jika tidak ditentukan, gambar akan disejajarkan ke kiri secara default. Pada artikel ini kita akan melihat cara menyelaraskan gambar ke tengah di CSS, serta ke kanan dan kiri.

Cara memusatkan gambar di css

Untuk memusatkan gambar di CSS, properti berikut digunakan:

1. display (jenis tampilan visual). Secara default, batas elemen gambar sama dengan dimensinya (lebar, tinggi) dan properti ini tidak mengizinkannya ditampilkan di tengah. Oleh karena itu, pertama-tama Anda perlu mengubah gambar menjadi elemen blok yang akan menempati seluruh lebar blok induk, dengan tetap mempertahankan dimensi gambar. Ini akan menampilkan gambar di tengah bloknya sendiri. Untuk menyetel properti gambar menjadi elemen blok yang menempati seluruh lebar, gunakan properti display: block.

2. margin (margin luar). Untuk properti margin: y1 x1 y2 x2 , nilai y1 x1 y2 x2 masing-masing bertanggung jawab atas margin di atas, kanan, bawah, dan kiri. Jika alih-alih indentasi x1 dan x2 Anda menulis auto di css, maka gambar akan disejajarkan ke tengah relatif terhadap bidang horizontal.

Contoh kode cara memusatkan gambar

Hasil di browser

Kode halaman

Cara meratakan banyak gambar di tengah di css

Seringkali ada kasus ketika Anda perlu menyelaraskan beberapa gambar di tengah CSS; untuk kasus ini, akan lebih mudah untuk menggunakan lapisan div induk, yang akan berisi gambar. Lapisan div induk itu sendiri diperlukan untuk memusatkan gambar.

Memusatkan banyak gambar di css dilakukan dengan menempatkan semua gambar di dalam tag induk

, yang secara default sudah menjadi elemen blok, yaitu direntangkan hingga lebar penuh.

Tapi tagnya

Secara default, perataan sebaris dibiarkan, jadi Anda perlu menyetel properti perataan teks ke "tengah", maka semua kontennya akan berada di tengah.

.

Seharusnya terlihat seperti ini:

...ini gambarnya...

Hasil di browser

Bak pasir

Selain itu, Anda dapat mengatur indentasi untuk setiap gambar agar tidak saling menempel, namun berada pada jarak tertentu satu sama lain. Indentasi dibuat melalui properti margin yang sama yang dibahas di atas. 11 Oktober 2013 pukul 17:17

Memusatkan gambar pada halaman

• Untuk margin: y1 x1 y2 x2 , angka dalam piksel y1 x1 y2 x2 masing-masing bertanggung jawab atas margin di atas, kanan, bawah, dan kiri.
• Contoh cara center align 3 gambar di css

Perkenalan

Saya suka memecahkan masalah tata letak yang menarik, dan mengingat pengalaman saya di bidang ini, kurang lebih 5 tahun, masalah seperti itu jarang muncul.
Saya baru-baru ini mengalami beberapa masalah seperti ini:

1. Memusatkan gambar di tengah halaman dan mengompresinya saat mengubah ukuran browser.

Pada prinsipnya, tugas pertama dan kedua dapat diselesaikan menggunakan javascript kecil, tetapi saya ingin melakukannya dengan bijak menggunakan html+css.
Tugas ini juga menjadi lebih mudah dengan fakta bahwa situs yang akan digunakan ini dikembangkan sebagai situs modern, dan dukungan terbatas pada ie9+, FF, Chrome, Safari, Opera.

2. Pemusatan gambar secara mutlak, berapa pun ukuran jendela browser.

Tapi saya harus mengutak-atik ini. Ide awalnya adalah ini:

.wrapper( luapan: tersembunyi; posisi: tetap; atas: 0; kanan: 0; bawah: 0; kiri: 0; ) .item( posisi: absolut; atas: 50%; kiri: 50%; tampilan: blok sebaris ; ) .item img( margin: -50% 0 0 -50%; )

Idenya didasarkan pada logika berikut:

• Blok luar, .pembungkus, direntangkan ke seluruh lebar dan tinggi bebas.
• unit dalam ruangan, .barang, mengambil lebar dan tinggi gambar yang terletak di dalam, karena merupakan blok sebaris; dan ditempatkan dengan sudut kiri atas di tengah blok induk.
• Menempatkan gambar dalam margin minus, yang seharusnya sejajar tepat di tengah .pembungkus

Tetapi gagasan yang sepenuhnya logis diinterupsi oleh ketergantungan yang lebih logis. Padding 50% dihitung berdasarkan setengah tinggi atau lebar induk. Dalam kasus saya, lebar dan tinggi induk dibuat berdasarkan lebar dan tinggi gambar, dan setelah gambar digeser -50%, maka induknya, .barang, berkurang sebesar 50% dan lingkaran ditutup.

Saya memutuskan hal ini dengan mengingat transformasi, atau lebih tepatnya fungsi terjemahannya, yang seolah-olah menggeser tampilan suatu objek, namun meninggalkan tempatnya semula. Dan ternyata dengan mengganti margin gambar dengan transform: Translate(-50%, -50%); masalahnya segera teratasi. Dan inilah yang keluar pada akhirnya:

*( padding: 0; margin: 0; perataan vertikal: atas; ) html, body( lebar: 100%; tinggi: 100%; ) .wrapper( overflow: tersembunyi; posisi: tetap; atas: 0; kanan: 0 ; bawah: 0; kiri: 0; ) .item( posisi: absolut; atas: 50%; kiri: 50%; tampilan: blok sebaris; ) .item img( -webkit-transform: terjemahan(-50%, - 50%); -moz-transformasi: terjemahkan(-50%, -50%);

PS: Saya tidak yakin apakah ini satu-satunya pilihan atau tidak. Menurut saya opsi ini tidak cocok untuk semua orang.
Tapi saya tahu pasti bahwa jika mereka cocok untuk kasus saya, maka akan ada orang yang mungkin akan sangat membantu mereka dalam tugas mereka. Selain itu, jika Anda menambahkan sedikit ke kode, Anda dapat menambahkan kruk untuk IE lama, saya tidak menambahkannya karena saya tidak ingin merusak kode bersih demi browser yang sudah ketinggalan zaman.
PS2: Kritik dan saran sangat kami harapkan. Terima kasih telah membaca sampai akhir.

Tag: html, css, css3, gambar, gambar, gambar, perataan, perataan vertikal

Artikel ini tidak dapat dikomentari karena penulisnya belum menjadi anggota penuh komunitas. Anda hanya dapat menghubungi penulis setelah dia menerima undangan dari seseorang di komunitas. Hingga saat ini, nama penggunanya akan disembunyikan dengan nama samaran.

Dekat rektor CSS HTML

Untuk penyisipan

gambar dalam HTML Dua format utama yang digunakan adalah GIF dan JPEG. Format GIF dapat menyimpan animasi sederhana (banner dinamis), JPEG sangat bagus untuk gambar dengan banyak warna, seperti foto. Format ketiga untuk grafik web adalah PNG, tetapi tidak banyak digunakan dalam desain web. Gambar apa pun dalam format GIF atau JPEG dimasukkan ke halaman web menggunakan tag; Atribut SRC Melalui atribut src alamat (URL) file gambar ditentukan, mis. browser menemukan gambar yang diinginkan di direktori situs menggunakan jalur (URL) yang ditentukan dalam atribut ini. Untuk kenyamanan, semua gambar situs ditempatkan di folder terpisah, biasanya diberi nama gambar

. Misalnya, ambil gambar apa pun, sebaiknya format kecil, dan simpan di folder gambar yang dibuat, dengan nama

primer.jpg

. Selanjutnya kita akan merujuknya untuk pelatihan. ∼ ∼