Cara Memusatkan Imej secara menegak dan mendatar dengan CSS

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-alignharta 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: autoproperti (untuk margin kiri dan margin kanan).

Walau bagaimanapun, penggunaan margin: autosahaja 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-alignharta tanah untuk bekas, kami juga menggunakan display: flexbekas itu.

Walau bagaimanapun, penggunaan display: flexsahaja tidak akan mencukupi. Kontena juga mesti mempunyai harta tambahan yang disebut justify-content:

div { display: flex; justify-content: center; } img { width: 60%; }

Properti justify-contentini 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: flexharta 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: flexsekali 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-itemsunsur kedudukan harta boleh menegak jika digunakan bersama-sama dengan display: flex.

Kedudukan: Sifat Mutlak & Transform

Kaedah lain untuk penjajaran menegak adalah dengan menggunakan sifat positiondan transformbersama. Yang ini agak rumit, jadi mari kita lakukan langkah demi langkah.

Langkah 1: Tentukan Kedudukan Mutlak

Pertama, kita mengubah tingkah laku kedudukan gambar dari staticmenjadi 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: relativediv 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 transformharta 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!