javascript怎么讓圖片居中顯示？下面本篇文章給大家介紹一下。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

javascript讓圖片居中顯示的方法

1、準(zhǔn)備一個(gè)圖片，如圖，我將圖片放到了和HTML同級(jí)目錄中

2、編寫HTML文件，如代碼所示，寫了一個(gè)div，在style中設(shè)置了div的邊框，寬度高度等，在div中添加一個(gè)圖片標(biāo)簽img

3、頁(yè)面顯示結(jié)果如圖所示

4、現(xiàn)在我們來(lái)實(shí)現(xiàn)圖片水平居中，代碼如下，其中text-align: center;的意思是將div中的內(nèi)容排列到中間，vertical-align: middle;的意思是將元素放在父元素中部

5、頁(yè)面顯示結(jié)果如下

6、然后將圖片設(shè)為水平垂直居中，代碼如下，其中display: table;的意思是將div作為塊級(jí)表格來(lái)顯示，display: table-cell;的意思是將圖片span標(biāo)簽作為一個(gè)表格單元格來(lái)顯示

7、頁(yè)面顯示結(jié)果如圖

8、如果要使用js將圖片居中的話，就引入jQuery，再在JavaScript中添加代碼$('.app').css({'display':'table', 'text-align':'center'});

$('.img').css({'display':'table-cell', 'vertical-align':'middle' });

就可以了，效果和上面是一樣的

更多web前端開發(fā)知識(shí)，請(qǐng)查閱 HTML中文網(wǎng) ！！

總結(jié)

以上是生活随笔為你收集整理的html实现页面中内容居中显示图片,javascript怎么让图片居中显示？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。