Rumah hujung hadapan web tutorial css 如何让list-style-image图片垂直居中?

如何让list-style-image图片垂直居中?

Jun 29, 2017 am 10:20 AM
menegak pusat

如果使用list-style-image设置了一个列表项的前面的小图标,在FF下是正常显示的, list-style-image 图片垂直居中
如果使用list-style-image设置了一个列表项的前面的小图标,在FF下是正常显示的,

但是在IE下想让他也居中正常的显示,死活不听话。
退而求其次,找了一个折中的解决办法,

就是使用ul li的backgrou-image(背景图片)来解决。
如下:

ul li{ 
height:28px; /*列表项的高度*/ 
line-height
:28px; /*列表项的行高,行高与高设为相同,文字垂直居中*/ 
text-indent
:15px; /*文字缩进15个像素,不然压到图表了*/ 
background-image
:url("../images/icon.gif"); /*图片的url地址*/ 
background-position
:left 45%; /*北京图片的定位*/ 
background-repeat
:no-repeat; /*禁止图片平铺,显示一个就好了*/ 
}
Salin selepas log masuk


Firefox : li{background-position:left 50%)
IE : li{background-position:left 45%)

具体百分比请试一试!

Atas ialah kandungan terperinci 如何让list-style-image图片垂直居中?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menetapkan pemusatan jadual WPS Bagaimana untuk menetapkan pemusatan jadual WPS Mar 19, 2024 pm 09:34 PM

Apabila fungsi WPS menjadi semakin berkuasa, kami menghadapi lebih banyak masalah tentang penggunaan fungsi. Dalam WPS, kita sering menggunakan jadual WPS Jika kita perlu mencetak jadual WPS, untuk menjadikan jadual kelihatan cantik, kita perlu memusatkan meja pada masa ini. Jadi, persoalannya, bagaimana kita hendak memusatkan jadual WPS? Hari ini saya berkongsi tutorial di sini, saya harap ia dapat membantu anda! Butiran langkah: 1. Saya akan menerangkannya melalui operasi praktikal Berikut adalah borang mudah yang saya buat menggunakan borang WPS. 2. Melalui pratonton cetakan, kita dapati bahawa jadual WPS berada di sebelah kiri secara lalai. Bagaimana jika kita mahu memusatkan meja? 3. Pada masa ini, kita perlu mengklik [Layout Halaman] dalam [Bar Alat]

Bagaimana untuk memusatkan div di dalam div lain? Bagaimana untuk memusatkan div di dalam div lain? Sep 08, 2023 am 11:13 AM

Pengenalan Penjajaran pusat div ialah salah satu aspek terpenting dalam pembangunan bahagian hadapan. Dalam artikel ini, kita akan melihat teknik meletakkan satu div di dalam div lain menggunakan HTML dan CSS. Dalam tutorial ini kita akan mempunyai div ibu bapa yang sepatutnya mempunyai div anak. Tugas kami ialah meletakkan div anak di tengah div induk. Menggunakan terjemahan Transform dan sintaks kedudukan ini bukanlah cara yang sangat popular untuk menyelaraskan satu div ke dalam sintaks div lain kiri:50%;atas:50%;Transform:translate(-50%,-50%);atas Sintaks melakukan berikut - Peraturan CSS "left:50%;" menetapkan kedudukan mendatar elemen kepada

Cara-cara: Bagaimana untuk mengubah saiz dan memusatkan ikon bar tugas Win11 Cara-cara: Bagaimana untuk mengubah saiz dan memusatkan ikon bar tugas Win11 Jan 03, 2024 am 08:17 AM

Win11 membawa antara muka yang serba baharu, termasuk perubahan pada bar tugas Walau bagaimanapun, ramai pengguna merasakan bahawa ikon bar tugas terlalu besar dan tidak digunakan untuk menggunakannya Atas sebab ini, perkara berikut akan membawa anda perubahan ikon bar tugas berpusatkan win11 Datang dan pelajari kaedah operasi kecil bersama-sama. Bagaimana untuk menjadikan ikon bar tugas tengah lebih kecil dalam win11: 1. Pertama, anda perlu membuka editor pendaftaran. 2. Kemudian kembangkan: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced\. 3. Kemudian buat nilai DWORD baharu "TaskbarSi" di sebelah kanan, dan tambah

Bagaimana untuk memusatkan kotak teks dalam HTML Bagaimana untuk memusatkan kotak teks dalam HTML Feb 19, 2024 pm 11:01 PM

Cara memusatkan kotak teks HTML memerlukan contoh kod khusus Dalam reka bentuk web, elemen penjajaran tengah adalah keperluan susun atur biasa. Untuk kotak teks HTML, terdapat beberapa cara untuk menjadikannya kelihatan berpusat. Berikut akan memperkenalkan anda kepada kaedah pemusatan yang biasa digunakan secara terperinci, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan atribut pemusatan dalam helaian gaya CSS Untuk mencapai paparan berpusat kotak teks, anda boleh menggunakan atribut penjajaran teks dalam helaian gaya CSS. Tetapkan elemen bekas induk tempat kotak teks terletak kepada penjajaran tengah.

Perkongsian kemahiran bahagian hadapan: Gunakan CSS3 fit-content untuk memusatkan elemen secara mendatar Perkongsian kemahiran bahagian hadapan: Gunakan CSS3 fit-content untuk memusatkan elemen secara mendatar Sep 09, 2023 pm 01:36 PM

Perkongsian kemahiran bahagian hadapan: Gunakan CSS3fit-content untuk memusatkan elemen secara mendatar Dalam pembangunan bahagian hadapan, kita sering menghadapi situasi di mana kita perlu memusatkan elemen secara mendatar. Kesan ini boleh dicapai dengan mudah menggunakan sifat fit-content CSS3. Artikel ini akan memperkenalkan cara menggunakan atribut fit-content dan memberikan contoh kod. Atribut fit-content ialah nilai panjang berbanding bekas induk elemen, yang boleh mengira lebar elemen secara automatik berdasarkan saiz sebenar kandungan. Dengan menukar elemen

Bilangan segmen garisan mendatar atau menegak yang diperlukan untuk menyambung 3 titik Bilangan segmen garisan mendatar atau menegak yang diperlukan untuk menyambung 3 titik Aug 25, 2023 pm 04:49 PM

Katakan bahawa diberikan tiga titik (atau koordinat) yang berbeza, anda ingin mencari bilangan segmen garis mendatar atau menegak yang boleh dibentuk dengan menyambungkan tiga titik ini. Segmen garisan sedemikian juga dipanggil polylines. Untuk menyelesaikan masalah ini, anda memerlukan konsep geometri pengiraan. Dalam artikel ini, kita akan membincangkan pelbagai cara untuk menyelesaikan masalah ini dalam C++. Senario input dan output mengandaikan bahawa c1, c2 dan c3 ialah koordinat 3 titik pada satah Cartes. Bilangan segmen garisan mendatar atau menegak yang menghubungkan 3 titik ini adalah seperti yang ditunjukkan di bawah. Input:c1=(-1,-1),c2=(-2,3),c3=(4,3)Output:1Input:c1=(1,-1),c2=(1,3),c3 =(4,3)Output:2Input:c1=

Petua CSS: Cara Melaksanakan Reka Letak Jajaran Tengah Petua CSS: Cara Melaksanakan Reka Letak Jajaran Tengah Oct 20, 2023 pm 04:36 PM

Petua CSS: Cara Melaksanakan Susun Atur Jajaran Tengah Dalam reka bentuk web, susun atur sejajar tengah sering digunakan. Sama ada teks menjajarkan tengah, imej atau keseluruhan reka letak halaman, semuanya boleh dicapai melalui CSS. Artikel ini akan memperkenalkan beberapa teknik CSS untuk mencapai reka letak sejajar tengah dan memberikan contoh kod khusus. Mula-mula, mari kita lihat cara melaksanakan reka letak berpusat mendatar. Berikut ialah contoh kod untuk beberapa elemen biasa: Penjajaran pusat teks: .text-center{text-align:ce

Petua CSS3: Aplikasi berpusat secara mendatar bagi atribut kandungan muat Petua CSS3: Aplikasi berpusat secara mendatar bagi atribut kandungan muat Sep 08, 2023 am 08:55 AM

Petua CSS3: Aplikasi Pemusatan Mendatar Atribut Fit-Kandungan Semasa mereka bentuk halaman web, anda sering menghadapi situasi di mana anda perlu memusatkan elemen secara mendatar. Dalam CSS3, kita boleh menggunakan atribut fit-content untuk mencapai pemusatan mendatar. Atribut fit-content mentakrifkan lebar elemen yang paling sesuai dengan kandungan Ia melaraskan lebar elemen secara automatik berdasarkan kandungan di dalam elemen. Seterusnya, mari kita lihat cara menggunakan atribut fit-content untuk mencapai kesan pemusatan mendatar. pertama,

See all articles