前端技术之CSS实现图片垂直居中_html/css_WEB-ITnose
Jun 21, 2016 am 09:13 AM前端技术之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 空间就专门对图片进行了显示优化处理,如果图片中有人脸的话,在缩略图中会突出人脸部分,这种图像识别技术需要服务端的支持。
下面附上实现图片居中的部分代码:
<style>.imgTab{ border-collapse: collapse; border-spacing: 0; text-align: center;}.imgTab td{ padding: 5px;}.imgWrap { width: 200px;}.imgWrap img{ max-height: 200px; max-width: 200px;}</style><table class="imgTab"> <tr> <td> <div class="imgWrap"> <img src="" / alt="前端技术之CSS实现图片垂直居中_html/css_WEB-ITnose" > </div> </td> </tr></table>
阅(253)评(0)查看评论

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?

Bagaimana cara menambah kesan strok kepada imej PNG di laman web?

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?

Apakah implikasi keselamatan menggunakan iframes, dan bagaimana saya dapat mengurangkannya?

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?

Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik?

Bagaimana saya menggunakan html5 & lt; meter & gt; elemen untuk memaparkan data berangka dalam julat?
