設置圖片位於div正中間
阿新 • • 發佈:2019-05-02
-h red posit 方法 什麽 ive items lin relative
最忌總結了幾種居中圖片的方法,跟大家分享一下,有什麽總結不到位的還請大神多多指點。
1、利用彈性布局居中圖片,兼容IE9以上瀏覽器
<div style="width: 400px;height: 400px;background-color: blue;display: flex;align-items: center;justify-content: center;"> <img src="img/develop.png" style="width: 100px;height: 100px;background-color: red;" /> </div>
align-items: center;表示垂直居中,justify-content: center;表示水平居中。
2、兼容IE8的居中方式
<div style="width: 400px;height: 400px;background-color: blue;line-height: 440px;text-align: center;"> <img src="img/develop.png" style="width: 100px;height: 100px;background-color: red;margin: 0 auto;" /> </div>
3、兼容IE6的居中方式
<div style="width: 400px;height: 400px;background-color: blue;position: relative;"> <img src="img/develop.png" style="width: 100px;height: 100px;background-color: red;display: inline-block;position: absolute;top: 50%;left:50%;margin-top: -50px;margin-left: -50px;" /> </div>
設置圖片位於div正中間