Bagaimana untuk memaparkan imej di tengah dalam html5

Kaedah pemusatan gambar: 1. Gunakan "margin:0 auto" untuk mencapai pemusatan mendatar; 4. Gunakan Jadual mencapai pemusatan menegak 5. Gunakan kedudukan untuk mencapai pemusatan menegak.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

1. Mula-mula, mari kita lihat kaedah pemusatan imej css secara mendatar

1. Gunakan margin:0 auto untuk mencapai pemusatan mendatar imej

imej html Kod pemusatan mendatar:

<div style="text-align:center;width:500px;border:greensolid1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"  style="margin:0 auto;"/>
</div>

2. Gunakan atribut pemusatan mendatar teks text-align:center untuk mencapai pemusatan mendatar imej

imej html mendatar kod pemusatan:

<div>
<div style="text-align:center;width:500px;border:greensolid1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"  style="display:inline-block;"/>
</div>

2. Mari kita lihat cara melaksanakan pemusatan menegak imej css

1. Gunakan line-height untuk mencapai pemusatan menegak imej

Pemusatan menegak imej HTML Kod adalah seperti berikut:

<div style="text-align:center;width:500px;height:200px;line-height:200px;border:greensolid1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display:inline-block;vertical-align:middle;"/>
</div>

Nota: Kaedah ini perlu menunjukkan ketinggian sebelum ia boleh digunakan.

2. Gunakan table untuk memusatkan imej secara menegak

Kod untuk memusatkan imej html secara menegak adalah seperti berikut:

<div style="text-align:center;width:500px;height:200px;display:table;border:greensolid1px;">
<span style="display:table-cell;vertical-align:middle;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display:inline-block;"/>
</span>
</div>

Nota: Kaedah ini menggunakan atribut pemusatan menegak bagi jadual

Nota: Di sini kami menggunakan display:table; dan display:table-cell; untuk mensimulasikan table kaedah ini tidak serasi dengan IE6/ IE7 dan IE67 tidak menyokong display:table Jika anda tidak perlu menyokong IE67, anda boleh menggunakan

Kaedah ini mempunyai kelemahan: apabila anda menetapkan display:table;, ia mungkin tukar reka letak asal anda

3 Gunakan position untuk mencapai pemusatan menegak imej

Kod untuk pemusatan menegak imej html adalah seperti berikut:

<div style="width:500px;height:200px;position:relative;border:greensolid1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="width:120px;height:40px;position:absolute;left:50%;top:50%;margin-left:-60px;margin-top:-20px;"/>
</div>

Arahan: Jika Kaedah ini boleh digunakan jika lebar dan tinggi imej diketahui.

Pembelajaran yang disyorkan: tutorial video HTML5

Atas ialah kandungan terperinci Bagaimana untuk memaparkan imej di tengah dalam html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!