锐客网

深圳网站设计公司锐客网络科技教你解决图片居中问题

发表日期:2018-07-27 作者:小锐 浏览次数:

深圳网站设计公司锐客网络科技教你解决图片居中问题

网站建设和深圳网页设计排版的过程中,网站图片居中是一个经常会遇到的问题,如何去处理,怎么处理才可以得心应手,今天深圳网站建设公司锐客网络科技给你支招,讲解深圳网页设计过程中图片居中的问题:

图片水平垂直居中情况很多,最简单的办法是吧图片设置为背景,给背景设置background-position:center;

如果只能用图片

分两种情况:

1、图片高度未知,这个布局比较难实现。用js可以做。

水平居中:同上,在图片的css中加 dispaly:block;margin:0 auto;

垂直居中:用js算出(div的高度-图片的高度)/2,得到margin-top值赋给它。

2、图片宽高固定,如果是需要水平居中:就在图片的css中加 dispaly:block;margin:0 auto;

如果需要垂直居中:自己算出(div的高度-图片的高度)/2,得到margin-top值即可。

上面讲解的就是关于图片居中的问题的解决办法,锐客网小编每次都是用这些方法解决的,都是可以把事情搞定的,你也不妨试一下 ;

DIV+CSS延伸与提高

假如我们设置".yangshi"的高度和line-height,要想此DIV中内容垂直居中同样我们设置vertical-align:middle即可,CSS代码如下:

.yangshiimg{vertical-align:middle;}

这里值得说明的是高度和line-height一定要大于图片高度,否则也会出现“CSSHACK”在不同浏览器中不兼容情况。

CSS总结:

1、单独文字垂直居中我们只需要设置CSS样式line-height属性即可。

2、文字与图片同排,在设置div高度同时再对此css样式的图片“img”样式设置vertical-align:middle垂直居中属性,如.yangshi img{vertical-align:middle;} 。

如没特殊注明,文章均为锐客网原创,转载请注明来自  http://www.szruike.cn/news/2377.html