!!!css如何让img图片居中?css的display属性实现图片居中(代码实例)
在我們開發(fā)前端頁面的時候,為了讓頁面效果美觀,會讓圖片呈現(xiàn)居中效果。那么css怎么讓img圖片居中顯示呢?本篇文章給大家?guī)韈ss如何讓img圖片居中?css的display屬性實現(xiàn)圖片居中(代碼實例),讓大家可以了解并掌握css的display屬性設(shè)置img圖片居中的兩種方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有所助。
首先我們來了解一下display屬性實現(xiàn)圖片居中的兩種方法是什么?
1、利用display的table-cell屬性值,再配合text-align: center;與vertical-align: middle;設(shè)置圖片居中
2、設(shè)置display: flex;,利用彈性布局flex來設(shè)置img圖片的居中
下面我們通過簡單的代碼示例,詳細了解一下這兩種方法是怎么實現(xiàn)圖片居中的。
1、利用display:table-cell來實現(xiàn)img標(biāo)簽圖片的水平和垂直居中
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
效果圖:
說明:
在demo盒子中設(shè)置display: table-cell;會讓demo盒子作為一個表格單元格顯示(類似 <td> 和 <th>),在設(shè)置text-align: center;就會讓img圖片水平居中,設(shè)置vertical-align: middle;讓img圖片垂直居中。
2、彈性布局flex
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
效果圖:
說明:
設(shè)置display: flex;實現(xiàn)flex彈性布局,在設(shè)置justify-content: center;讓圖片水平居中對齊,設(shè)置align-items: center;讓圖片垂直居中對齊。
總結(jié):以上就是css的display屬性實現(xiàn)圖片居中兩種方法的全部介紹,希望能對大家的學(xué)習(xí)有所幫助
http://www.php.cn/css-tutorial-411880.html
總結(jié)
以上是生活随笔為你收集整理的!!!css如何让img图片居中?css的display属性实现图片居中(代码实例)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 新娘婚礼当天收到硕士录取通知书:真洞房花
- 下一篇: CTK插件-入门打印