溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“html中圖片如何居中對齊”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“html中圖片如何居中對齊”這篇文章吧。
圖片的居中方式有很多種吧，算是html基礎，下面給大家介紹幾種方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> div{ width: 200px; height: 200px; border: 3px solid skyblue; } </style> </head> <body> <div> <img src="1.jpg" width="150px" /> </div> </body> </html> |
以上代碼的效果圖：
方法1：
1 2 3 4 5 6 | img{ position: relative; left: 50%; top: 50%; margin: -60px 0 0 -75px; } |
給img標簽設置position定位，position:relative，left：50%；top：50%分別指將改元素向右移動一半父容器寬度的距離以及向下移動一半父容器高度的距離，由于移動的距離是以父容器為標準的一半高度寬度距離，效果如下：
因為這張圖片較大，所以超出了div的范圍。。。
之后要將 img往回移動，才能使img元素居中顯示，margin: -60px 0 0 -75px;指的是將img元素向左移動75px，向上移動60px（因為用的圖片素材的寬高為150*120），這樣便能使得圖片居中了。
方法2：
1 2 3 4 5 6 | img{ position: relative; left: 50%; top: 50%; transform: translate(-50%,-50%); } |
其實這里跟上面的方法是類似的，但是個人覺得這種比較實用，因為方法一有個麻煩的地方，就是margin值必須跟著img元素的大小變化，如果說img元素都是一樣的大小倒無所謂，但是這種要求未免有些高。
這種做法是用的2d轉換，transform：translate（x軸移動的數值，y軸移動的值），這個方法的好處便在于不用去測量img元素的寬高，直接設置百分比，在transform：translate（）中，使用的百分比其實是相對于元素自身寬高的。
方法3：
設置為兩級父容器，第一級設置display：table，將第一級父容器轉換成表格類型，
之后在第二級，也就是img的上一級父容器設置display：table-cell，
在第一級父容器中設置text-align：center，
第二級設置vertical-align: middle，便可以達到將圖片居中的目的
方法4：
設置主側軸對齊方式
1 2 3 | <div class="a"> <img src="img/MEIZU.png" > </div> |
1 2 3 4 5 6 7 8 9 10 11 | div.a{ width: 600px; height: 200px; border: 1px solid saddlebrown; display: flex; justify-content: space-around; align-items: center; } div.a img{ border: 1px solid red; } |
給父容器設置display：flex，將父容器轉換成伸縮盒子，因為應用主側軸對齊方式就需要這樣。。。。
之后再設置主軸對齊方式為 justify-content: space-around;
注意: Internet Explorer 10 及更早版本瀏覽器不支持 justify-content 屬性。
注意: Safari 6.1 及更新版本通過 -webkit-justify-content 屬性支持該屬性。
接著設置父容器的側軸對齊方式，align-items: center;
注意: Internet Explorer 10 及更早版本瀏覽器不支持 align-items 屬性。
注意: Safari 7.0 及更新版本通過 -webkit-align-items 屬性支持該屬性。
看啥呢，圖片這樣就已經居中了啊。
如果不是因為Internet Explorer 10 及更早版本瀏覽器不支持，其實這個方法算是最合適的吧。
以上是“html中圖片如何居中對齊”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
