Banyak pembangun berjuang semasa bekerja dengan gambar. Menangani respons dan penjajaran sangat sukar, terutama memusatkan gambar di tengah halaman.
Oleh itu, dalam catatan ini, saya akan menunjukkan beberapa cara yang paling biasa untuk memusatkan imej secara menegak dan mendatar menggunakan sifat CSS yang berbeza.
Saya telah membincangkan sifat Kedudukan dan Paparan CSS dalam catatan saya sebelum ini. Sekiranya anda tidak biasa dengan sifat tersebut, saya cadangkan anda menyemak catatan tersebut sebelum membaca artikel ini.
Inilah versi video jika anda ingin melihatnya:
Memusatkan Imej secara Mendatar
Mari mulakan dengan memusatkan gambar secara mendatar dengan menggunakan 3 sifat CSS yang berbeza.
Teks-Sejajarkan
Cara pertama untuk memusatkan imej secara mendatar adalah menggunakan text-align
harta tanah. Walau bagaimanapun, kaedah ini hanya berfungsi jika gambar berada di dalam bekas tahap blok seperti :
div { text-align: center; }
Margin: Auto
Cara lain untuk memusatkan gambar adalah dengan menggunakan margin: auto
properti (untuk margin kiri dan margin kanan).
Walau bagaimanapun, penggunaan margin: auto
sahaja tidak akan berfungsi untuk gambar. Sekiranya anda perlu menggunakan margin: auto
, ada 2 sifat tambahan yang mesti anda gunakan juga.
Properti margin-auto tidak mempunyai kesan pada elemen tahap sebaris. Oleh kerana
teg adalah elemen sebaris, kita perlu mengubahnya menjadi elemen tahap blok terlebih dahulu:
img { margin: auto; display: block; }
Kedua, kita juga perlu menentukan lebar. Oleh itu, margin kiri dan kanan dapat mengambil sisa ruang kosong dan menyelaraskan secara automatik, yang melakukan silap mata (kecuali jika kita memberikannya lebar 100%):
img { width: 60%; margin: auto; display: block; }
Paparan: Flex
Cara ketiga untuk memusatkan gambar secara mendatar adalah dengan menggunakan display: flex
. Sama seperti kami menggunakan text-align
harta tanah untuk bekas, kami juga menggunakan display: flex
bekas itu.
Walau bagaimanapun, penggunaan display: flex
sahaja tidak akan mencukupi. Kontena juga mesti mempunyai harta tambahan yang disebut justify-content
:
div { display: flex; justify-content: center; } img { width: 60%; }
Properti justify-content
ini berfungsi bersama display: flex
, yang dapat kita gunakan untuk memusatkan gambar secara mendatar.
Akhirnya, lebar gambar mestilah lebih kecil daripada lebar bekas, jika tidak, ia memerlukan 100% ruang dan kemudian kita tidak dapat memusatkannya.
Penting: The display: flex
harta tidak disokong dalam versi yang lebih lama pelayar. Lihat di sini untuk maklumat lebih lanjut.
Memusatkan Imej secara menegak
Paparan: Flex
Untuk penjajaran menegak, penggunaan display: flex
sekali lagi sangat membantu.
Pertimbangkan kes di mana bekas kami mempunyai ketinggian 800 piksel, tetapi ketinggian gambar hanya 500 piksel:
div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }
Sekarang, dalam kes ini, menambahkan satu baris kod ke bekas align-items: center
, melakukan silap mata:
div { display: flex; justify-content: center; align-items: center; height: 800px; }
The align-items
unsur kedudukan harta boleh menegak jika digunakan bersama-sama dengan display: flex
.
Kedudukan: Sifat Mutlak & Transform
Kaedah lain untuk penjajaran menegak adalah dengan menggunakan sifat position
dan transform
bersama. Yang ini agak rumit, jadi mari kita lakukan langkah demi langkah.
Langkah 1: Tentukan Kedudukan Mutlak
Pertama, kita mengubah tingkah laku kedudukan gambar dari static
menjadi absolute
:
div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }
Juga, ia harus berada di dalam bekas yang agak kedudukannya, jadi kami menambah position: relative
div kontena.
Langkah 2: Tentukan Properti Atas & Kiri
Kedua, kami menentukan sifat atas dan kiri untuk gambar, dan menetapkannya menjadi 50%. Ini akan memindahkan titik permulaan (kiri atas) gambar ke tengah bekas:
img { width: 80%; position: absolute; top: 50%; left: 50%; }
Langkah 3: Tentukan Transform Properti
Tetapi langkah kedua telah memindahkan gambar sebahagiannya ke luar bekasnya. Oleh itu, kita perlu membawanya semula ke dalam.
Mendefinisikan transform
harta tanah dan menambahkan -50% pada paksi X dan Y-nya melakukan helah:
img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Terdapat cara lain untuk memusatkan perkara secara mendatar dan menegak, tetapi saya telah menerangkan yang paling biasa. Saya harap siaran ini membantu anda memahami cara menyelaraskan gambar anda di tengah halaman.
Sekiranya anda ingin mengetahui lebih lanjut mengenai Pembangunan Web, sila lawati Saluran Youtube saya untuk maklumat lebih lanjut.
Terima kasih kerana membaca!