前端技术之CSS实现图片垂直居中_html/css_WEB-ITnose
前端技术之CSS实现图片垂直居中技术
maybe yes 发表于2015-03-14 18:52
让 图片实现水平居中比较简单,只需要在父级容器中添加属性 text-align 为 center 即可。使用纯 CSS 实现图片的垂直居中,可以将图片包裹容器的 display 属性设置为 table-cell,然后加上 vertical-align: middle 就好了 。table-cell 的显示效果同 table 是一样的,兼容性还不错,所以直接使用 table 来包裹图片也是同样的效果,个人认为使用 table 会更好一些,如果 DIV 显示成 table-cell 是很难控制边距的。
除了完成了上面的事情外,图片本身也是需要做一些处理的,一般要居中显示的图片的大小和比例都是不一致的。这样的情况下,我们需要去除图片标签本身自带的 width 和 height 属性,然后设置 max-width 和 max-height 属性即可。
除了使用 CSS 实现图片的居中显示,也可以根据图片的高度和宽度属性以及显示区域的大小,然后计算出图片的 margin-top 属性的值得到正常的偏移位置。这样的方法比较麻烦,毕竟要对每个图片进行计算,并且很难保证图片宽高属性的正确性,可能会导致图片变形。
当一个网站的价值越高时,需求也就越多,仅仅通过居中图片不一定给人好的视觉体验。比如 QQ 空间就专门对图片进行了显示优化处理,如果图片中有人脸的话,在缩略图中会突出人脸部分,这种图像识别技术需要服务端的支持。
下面附上实现图片居中的部分代码:
|
阅(253)评(0)查看评论
上一篇: 数组处理,计算ng数量,该如何处理
下一篇: discuz语法有关问题
推荐阅读
-
css5种实现垂直居中_html/css_WEB-ITnose
-
css如何将div实现全屏水平垂直居中_html/css_WEB-ITnose
-
CSS中实现DIV容器垂直居中_html/css_WEB-ITnose
-
CSS实现垂直居中的常用方法_html/css_WEB-ITnose
-
初学HTML/CSS:图片如何在DIV中的垂直居中,文字与DIV中的间距如何消除_html/css_WEB-ITnose
-
初学HTML/CSS:图片如何在DIV中的垂直居中,文字与DIV中的间距如何消除_html/css_WEB-ITnose
-
阿里巴巴技术文章分享:阿里云无线&前端团队是如何基于webpack实现前端工程化的_html/css_WEB-ITnose
-
css实现的弹出窗口始终垂直水平居中效果_html/css_WEB-ITnose
-
【请教】如何实现横向布局时图片A居中宽度固定,左右两侧由不同的图片B、C填充为背景_html/css_WEB-ITnose
-
CSS实现水平垂直同时居中的5种思路_html/css_WEB-ITnose