Bagaimana untuk menulis kod untuk memusatkan imej dalam css-tutorial css-php.cn

Anda boleh menggunakan kod berikut dalam CSS untuk memusatkan imej secara mendatar: Tetapkan elemen kontena text-align: center;. Tetapkan imej sebagai paparan elemen peringkat blok sebaris: blok sebaris;. Tengahkan imej secara menegak-sejajarkan: tengah;. Tengahkan imej secara menegak: Tetapkan elemen bekas kepada paparan kotak flex: flex;. Pusat elemen anak sejajarkan secara menegak-item: tengah;. Pusat elemen kanak-kanak secara mendatar justify-content: center;. Hadkan lebar maksimum saiz imej: 100%;, ketinggian maksimum:

Bagaimana untuk menulis kod untuk memusatkan imej dalam css

Kod untuk memusatkan imej dalam CSS

Soalan:Bagaimana untuk menggunakan kod CSS secara mendatar dan menegak dalam elemen mendatar?

Jawapan:

Pusat mendatar

.image-container { text-align: center; } .image { display: inline-block; vertical-align: middle; }

Salin selepas log masuk

Pusat menegak

.image-container { display: flex; align-items: center; justify-content: center; } .image { max-width: 100%; max-height: 100%; }

Salin selepas log masuk

Butiran:

text-align: center; code> akan The Elemen bekas imejditetapkan untuk dipusatkan secara mendatar.text-align: center;将image-container元素设置为水平居中。


        display: inline-block;将image元素设为内联块级元素，允许它与文本对齐。
        vertical-align: middle;将image元素在垂直方向上居中，与 surrounding text 对齐。


       垂直居中
       
        display: flex;将image-container元素设为 flexbox，允许对其子元素进行灵活布局。
        align-items: center;将image-container元素中的所有子元素在垂直方向上居中。
        justify-content: center;将image-container元素中的所有子元素在水平方向上居中。
        max-width: 100%;和max-height: 100%;限制image元素的大小，使其适应image-container
        display: inline-block;Menjadikan elemen
        imejsebagai elemen peringkat blok sebaris, membolehkan ia diselaraskan dengan teks.
       
       vertical-align: middle;Memusatkan elemen
       imagesecara menegak dan menjajarkannya dengan teks sekeliling. .
       align-item: center;Memusatkan semua elemen anak dalam elemen
       image-containersecara menegak.
       justify-content: center;Memusatkan semua elemen anak dalam elemen
       image-containersecara mendatar.
       
        lebar maks: 100%; dan
        tinggi maks: 100%;mengehadkan saiz elemen
        imejsupaya ia muat dalam
        Saiz elemen bekas imejsambil mengekalkan nisbah bidang.
       
       Atas ialah kandungan terperinci Bagaimana untuk menulis kod untuk memusatkan imej dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!