1. 程式人生 > >HTML圖片居中顯示

HTML圖片居中顯示

前言:從不熟悉到熟悉是一個過程,在這個過程中充滿著許多的樂趣

正文:

牛腩已經進入到了頁面設計階段,在這個過程中也發生了許多有趣的事情這不今天就遇見了如何讓圖片居中這個事情。

首先將圖片設定居中 style="margin-left:25%"

說明:25%表示隨著螢幕整體向左移動25%,這是在HTML中寫的,這種寫法是較為靈活,它可以隨不同的螢幕而調整,其中25%是可以自己根據實際情況來設定和調整的。如下圖

圖一是調整前的樣式:(可以看見圖片明顯靠左)


圖二、調整後


下方是圖二程式碼:

圖二的程式碼如下:
<div>
                <a href ="Default.aspx"><img src="images/niunanlogo.jpg" style="margin-left:25%" /></a>
                <a href ="http://www.baidu.com"target="_blank"><img src="images/tg029logo.gif" /></a>
            </div>
總結:方法還有很多種,只要不拒絕,善於去發現就會收穫到意料之外的驚喜。