成都创新互联网站制作重庆分公司

html5中如何实现居中显示图片

本篇内容介绍了“html5中如何实现居中显示图片”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

目前创新互联建站已为近1000家的企业提供了网站建设、域名、网页空间、网站托管运营、企业网站设计、白城网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

一、首先,我们来看看css图片水平居中的方法

1、利用margin:0 auto实现图片水平居中

html图片水平居中代码:


2、利用文本的水平居中属性text-align:center实现图片水平居中

html图片水平居中代码:

二、我们来看看css图片垂直居中的实现方法

1、利用line-height实现图片垂直居中

html图片垂直居中代码如下:



注意:此种方法需要注明高度才可以使用。

2、利用table实现图片垂直居中

html图片垂直居中代码如下:





注意:此种方法是利用了table的垂直居中属性

说明:这里使用display:table;display:table-cell;来模拟table,这种方法并不兼容IE6/IE7,IE67不支持display:table,如果你不需要支持IE67那就可以用

这种方法有一个缺点:当你设置了display:table;可能会改变你的原有布局

3、利用position实现图片垂直居中

html图片垂直居中代码如下:



说明:如果已知图片的宽度和高度可以用这种方法。

“html5中如何实现居中显示图片”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


本文标题:html5中如何实现居中显示图片
文章地址:http://cxhlcq.com/article/jpoipg.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部