溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“css實現任意圖片垂直居中的方法有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css實現任意圖片垂直居中的方法有哪些”吧！
方法一：
將外部容器的顯示模式設置成display:table，這個設置的意思不用多說了吧… img標簽外部再嵌套一個span標簽，并設置span的顯示模式為display:table-cell，這樣span內部的內容就相當于表格，可以很方便的使用vertical-align屬性來對齊其中的內容了。
代碼如下：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法1 - 未知高度的圖片垂直居中 - www.cleanthem.com</title> <style type="text/css"> body { height:100%; } #box{ width:500px;height:400px; display:table; text-align:center; border:1px solid #d3d3d3;background:#fff; } #box span{ display:table-cell; vertical-align:middle; } #box img{ border:1px solid #ccc; } </style> <!--[if lte IE 7]> <style type="text/css">? #box{ position:relative; overflow:hidden; } #box span{ position:absolute; left:50%;top:50%; } #box img{ position:relative; left:-50%;top:-50%; } </style> <![endif]--> </head> <body> <div id="box"> <span><img src="images/demo_zl.png" alt="" /></span> </div> </body> </html>演示地址
方法二：
標準瀏覽器的情況還是和上面一樣，不同的是針對IE6/IE7利用在img標簽的前面插入一對空標簽的辦法。
代碼如下：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法2 - 未知高度的圖片垂直居中 - www.cleanthem.com</title> <style type="text/css"> body { height:100%; } #box{ width:500px;height:400px; display:table-cell; text-align:center; vertical-align:middle; border:1px solid #d3d3d3;background:#fff; } #box img{ border:1px solid #ccc; } </style> <!--[if IE]> <style type="text/css">? #box i { display:inline-block; height:100%; vertical-align:middle } #box img { vertical-align:middle } </style> <![endif]--> </head> <body> <div id="box"> <i></i><img src="images/demo_zl.png" alt="" /> </div> </body> </html>演示地址
方法三：
在img標簽外包裹一個p標簽，標準瀏覽器利用p標簽的偽類屬性:before來實現居中，另外，對于IE6/IE7使用了CSS表達式來實現兼容。
代碼如下：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法3 - 未知高度的圖片垂直居中 - www.cleanthem.com</title> <style type="text/css"> body { height:100%; } #box{ width:500px;height:400px; text-align:center; border:1px solid #d3d3d3;background:#fff; } #box p{ width:500px;height:400px; line-height:400px; /* 行高等于高度 */ } /* 兼容標準瀏覽器 */ #box p:before{ content:"."; /* 具體的值與垂直居中無關，盡可能的節省字符 */ margin-left:-5px; font-size:10px; /* 修復居中的小BUG */ visibility:hidden; /*設置成隱藏元素*/ } #box p img{ *margin-top:expression((400 - this.height )/2); /* CSS表達式用來兼容IE6/IE7 */ vertical-align:middle; border:1px solid #ccc; } </style> </head> <body> <div id="box"> <p><img src="images/demo_zl.png" alt="" /></p> </div> </body> </html>感謝各位的閱讀，以上就是“css實現任意圖片垂直居中的方法有哪些”的內容了，經過本文的學習后，相信大家對css實現任意圖片垂直居中的方法有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
