網(wǎng)站設(shè)計圖片居中怎么弄出來

在網(wǎng)站設(shè)計中，圖片的使用不可避免。對于一些需要突出展示的圖片，往往需要將其居中顯示。但是，有時候我們會發(fā)現(xiàn)圖片顯示不居中，哪里出了問題？下面就來分析一下。

一、圖片沒有設(shè)置寬度和高度

在網(wǎng)站設(shè)計中，圖片如果沒有設(shè)置寬度和高度，那么它的顯示方式將會根據(jù)瀏覽器的默認大小進行顯示，這樣就會導致圖片不居中的情況發(fā)生。

二、外部容器沒有設(shè)置 text-align:center

在使用外部容器包裹圖片的時候，如果沒有設(shè)置text-align:center，就會導致圖片在外部容器中不居中的情況發(fā)生。因為默認情況下外部容器是左對齊的。

三、外部容器寬度不足

在設(shè)置外部容器的寬度時，如果寬度不足，也會導致圖片不居中的情況發(fā)生。因為圖片居中是相對于外部容器來設(shè)置的，如果寬度不夠，就會導致圖片顯示到了外部容器的左側(cè)，即使text-align:center也無法奏效。

四、使用 margin:auto 居中

在設(shè)置圖片居中時，最常使用的方式就是使用margin:auto。這種方式可以自動計算左右的邊距，使得圖片自動居中。要注意的是，這種方式只適用于塊級元素，如果設(shè)置在行內(nèi)元素上，就不會產(chǎn)生居中效果。

以上是幾種圖片不居中的常見情況，要想解決圖片不居中的問題，就需要針對這些情況進行相應(yīng)的調(diào)整。下面，就來詳細介紹一下如何使用margin:auto實現(xiàn)圖片居中的效果。

1、首先，需要給圖片一個寬度

在使用margin:auto 居中圖片時，首先需要給圖片設(shè)置寬度，這樣才能夠計算出左右的邊距。寬度可以使用百分比、像素值、自適應(yīng)的方式進行設(shè)置。

2、設(shè)置外部容器

在使用margin:auto 居中圖片時，還需要設(shè)置外部容器。不過，這里的外部容器并不是必須的，它只是為了方便設(shè)置margin:auto進行計算。外部容器的寬度需要設(shè)置得比圖片寬度稍大一些，否則圖片會直接頂?shù)酵獠咳萜鞯淖髠?cè)，居中效果就無法實現(xiàn)了。

3、使用 CSS 代碼實現(xiàn)

要實現(xiàn)margin:auto進行居中，需要使用以下CSS代碼：

img{

display:block;

margin:auto;

}

其中，display:block是為了將圖片轉(zhuǎn)化為塊級元素，這樣才可以使用margin:auto進行設(shè)置；margin:auto就是居中的關(guān)鍵代碼。

總結(jié)

以上就是關(guān)于網(wǎng)頁設(shè)計中圖片居中的一些常用方法和注意事項。在實際開發(fā)中，我們需要根據(jù)實際情況來選擇合適的方法進行設(shè)置，保證圖片可以正確的居中顯示，提升頁面的整體美觀度和用戶體驗。