網頁中怎麼讓圖片居中顯示

㈠ html中插入張圖片如何讓它居中

需要准備鍵告搜的材料分別有：電腦、瀏覽器、稿歷html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html，填寫問題基礎代碼。

㈡ HTML如何讓圖片居中顯示呢

方法如下：

1、首先 新建a.html文件，並准備一張小標，如下：

(2)網頁中怎麼讓圖片居中顯示擴展閱讀

HTML是標准通用標記語言下的一個應用，也是一種規范，一種標准，它通過標記符號來標記要顯示的網頁中的各個部分。

網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。

瀏覽器按順序閱讀網頁文件，然後根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對於不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。

㈢ 網頁製作圖片怎麼居中

圖片的寬度和高度是未知的，沒有一個固定的尺寸，在這個前提下要使圖片在一個固定了寬度和高度的容器中垂直居中，想想感覺還是挺麻煩的，由於最近的項目可能會用到這個方案，所以把一些常用的方法都收集整理了一下。

下圖是理想中的效果圖，外部容器的寬度和高度是固定的，中間的圖片寬度和高度未知，但是圖片要始終要相對於外部的容器垂直居中。

但是實際中實現的效果並不是很完美，由於各瀏覽器的解析都各不相同，所以各瀏覽器都會有1px-3px的偏差。

方法一 (XHTML 1.0 transitional)：

該方法是將外部容器的顯示模式設置成display:table，img標簽外部再嵌套一個span標簽，並設置span的顯示模式為display:table-cell，這樣就可以很方便的使用vertical-align象表格元素那樣對齊了，當然這只是在標准瀏覽器下，IE6/IE7還得使用定位。

HTML結構部分：

<div id="box">
<span><img src="images/demo.jpg" alt=""></span>
</div>

CSS樣式部分：

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->

方法二 (XHTML 1.0 transitional)：

方法二和方法一的實現的原理大同小異，結構也是相同的，方法一用的是條件注釋，方法二就用的CSS Hack。

CSS樣式部分：

<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
*position:absolute; /*針對IE6/7的Hack*/
top:50%; /*針對IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*針對IE6/7的Hack*/
top:-50%;left:-50%; /*針對IE6/7的Hack*/
border:1px solid #ccc;
}
</style>

該方法有個弊端，在標准瀏覽器下由於外部容器#box的顯示模式為display:table-cell，所以導致#box無法使用margin屬性，並且在IE8下設置邊框也無效。

方法三 (XHTML 1.0 strict)：

標准瀏覽器還是將外部容器#box的顯示模式設置為display:table-cell，IE6/IE7是利用在img標簽的前面插入一對空標簽的辦法。

HTML結構部分：

<div id="box"><i></i><img src="images/demo.jpg" alt=""></div>

CSS樣式部分：

<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
display:inline-block;
height:100%;
vertical-align:middle
}
#box img {
vertical-align:middle
}
</style>
<![endif]-->

方法三也同樣適用XHTML 1.0 transitional。以上方法都是收集於網頁教學網，暫時只對這3個方法比較滿意，兼容性方面不錯，使用起來的限制也比較小，還有些方法我也都一一測試過，效果都不理想，在各瀏覽器中的差異比較大。另外司徒正美這里也收集了一些方法。

㈣ 怎麼讓一張圖片在網頁中居中顯示

讓一張圖片在網頁中居中顯示，主要通過把圖片放在div中，利用css中的position位置屬性來實現。下面小編舉例講解css怎麼讓一張圖片在網頁中居中顯示。

工具/原料

html+css

代碼編輯器：DreamweaverCS5

方法/步驟

新建一個html文件，命名為test.html，用於講解用css怎麼讓一張圖片在網頁中居中顯示。

在test.html文件內，使用div標簽創建一個模塊，並設置模塊的class屬性為mydiv，主要用於下面通過該class來設置css樣式。

在test.html文件內，在div標簽內，使用img標簽創建一張圖片，圖片路徑是images文件下在2.jpg圖片。

在css標簽內，對html、body兩個元素進行全屏設置，將width寬度屬性和height高度屬性設置為100%。

在css標簽內，對類名為mydiv的div進行樣式設置，使用width屬性設置div的寬度為250px，使用height屬性設置div的高度為200px。

在神橘css標簽內，再使用position屬性設置div為絕對定位（absolute），距離網頁頂部（top）為50%，距離網頁左邊（left）為50%，因為這兩個距離不是圖片的中心點至邊界指含的距離，所以還要使游逗團用margin-top和margin-left進行設置，減去圖片一半寬度。

在瀏覽器打開test.html文件，查看實現的效果。

總結：

1

1、新建一個test.html文件。

2、在文件中，創建一個div模塊，在div內，使用img標簽創建一張圖片。

3、在css標簽內，設置div的高度、寬度、位置屬性為絕對定位，同時使用left和top設置居中顯示，從而實現圖片在網頁中居中顯示。

㈤ 在網頁設計中怎麼讓背景圖片水平居中

CSS使網頁背景圖片居中的三種方法。
1、第一種：用像素設定，很多都用這種，但是也是最麻煩的：
<div
style="width:800px;height:600px;background:url(圖片地址)
no-repeat
250px
270px;border:1px
solid
#cccccc;"></div>
2、第二種：用50%設定，很方便。
<div
style="width:800px;height:600px;background:url(圖片地址)
no-repeat
50%
50%;border:1px
solid
#cccccc;"></div>
3、第三種：用center設定（註：第2個center可以省略，因為默認就是center）。
<div
style="width:800px;height:600px;background:url(圖片地址)
no-repeat
center
center;border:1px
solid
#cccccc;"></div>

㈥ 怎麼讓一張圖片在網頁中居中顯示

一、慎棗蘆傳統HTML讓圖片橫向水平居中方法

直接在標簽對象內加「align="center"」即可讓對象內圖片橫向水平居中顯示。

align="center"使用方法：

<divalign="center"></div>

align="center"居中圖片DIV+CSS實例代碼：

htmlalign="center"圖片居中實例截圖

二、CSS讓圖片中DIV對象內水平居中

1、實例HTML+CSS完整代碼如下：

2、水寬頻平居中實例截圖

無論文字居中、圖片居中等內容居中，都可以使用以上兩種方法實現岩姿，一般推薦使用CSS進行，但網頁多時候，只需要修改CSS文件里對應一處選擇器樣式即可修改內容居中、居左、居右。

㈦ 怎樣用Dreamweaver使圖片居中

你好！若不用代碼的話可以藉助表格對齊的方式，也就在創建表格的時候讓它的寬度達到百分百，也就是整個猛則敏表格的額寬度與網頁的寬度是一致的的，然後呢在表格里插入圖片，插入圖片後在表格枝枝里空白的地方用盯祥滑鼠隨便點擊一下也就是選中這個表格的單元格的意思

然後就是在下面的屬性面板里調節：水平居中

注意不要調節那個文件夾樣式的居中對齊不頂事的

雖然步驟有點多但是能對齊，在不懂代碼的情況下只好這樣了，目前我還沒有別的方法，還是學代碼吧，只會軟體太木

一點不靈活，當然啦這也不是一個辦法，以後再工作中這么乾的話會增加網頁的負載量，插入表格，代碼單里會多一些代碼，也會影響打開速度的

如果只是自己一個網頁娛樂那就另當別論了

不過DW這軟體真有時不理解，下面那個對齊方式直接對齊不就行了嘛非繞彎子不是代碼就是表格的

㈧ 在網頁設計中怎麼讓背景圖片水平居中

CSS使網頁背景圖片居中的三種方法。
1、第一種：用像素設定，很多都用這種，但是也是最麻煩的：
2、第二種：用50%設定，很方便。
3、第三種：用center設定（註：第2個center可以省略，因為默認就是center）。

㈨ html中怎樣讓插入的圖片居中

一般來說可以用CSS中的「text-align:center屬性，margin:0 auto或定位屬性」就可以居中。但是主要看是看你的頁面布局是怎樣的，是否用了定位

1、img標簽中的align屬性不是定義圖像的位置，而是定義圖像與周圍文字的位置，並且不推薦使用這個屬性。

2、要給img定義一個父標簽，讓這個父標簽裡面的內容居中，那麼img自然就居中了。

比如說：<p align="center">img……</p>