masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > html tutorial > DIV+CSS 图文混排的图片居中办法_html/css_WEB-ITnose

DIV+CSS 图文混排的图片居中办法_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-24 11:44:10

asal

1918 orang telah melayarinya

不少人为了让 Div 图文混排的图片可以居中，给 IMG 套各式各样的 SPAN、DIV、LI 等等，以便于使用 text-align来进行居中。

1 <div>图文混排2 <br>3 <span style="text-align:center"><img  src="http://www.baidu.com/img/baidu_jgylogo3.gif" alt="DIV+CSS 图文混排的图片居中办法_html/css_WEB-ITnose" ></span>4 </div>

Salin selepas log masuk

而对于 DIV 的居中，使用下面的这种办法的非常多，然而这种办法默认状态下并不适用于 IMG 居中。

1 div{margin:0 auto}

Salin selepas log masuk

这是因为 IMG 标签是属于内联元素（行内元素），内联元素是不支持 Margin 属性，通过 Display 属性将 IMG 强制为块元素的方式显示，便可在图文混排中使得图片可以居中。

1 IMG {display:block;margin:0 auto;}

Salin selepas log masuk

Label berkaitan：

DIV+CSS 图文混排的图片居中办法

sumber：php.cn

Artikel sebelumnya：css雪碧图生成工具4.2更新_html/css_WEB-ITnose Artikel seterusnya：Filter Effects

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

Artikel terbaru oleh pengarang