製作網頁如何圖片居中

1. 網頁設計中如何把比界面大的圖片居中

普通瀏覽器就能做到。正常來講，這些圖都到了你的瀏覽器，你都能看到，沒有不能保存的道理（畢竟超文本傳輸協議）。但僅限於你看到的圖，步驟如下：
1.打開瀏覽器，打開元素審查功能，不同瀏覽器不一樣，谷歌是按F12，然後選中圖片，或者Ctrl+shift+C
2.選擇圖片後，在代碼界面找到src或者img或者href如這個鏈接
3.然後刪掉不必要的部分，黏貼到瀏覽器回車
4.這張圖片就可以右鍵另存為啦
注意事項：
如果網站一開始給的就是縮略圖或者不是高清的圖，只做展示用，那麼久下載到的還是不高清的圖，換句話說，對一些做設計的人想找原圖還是找不到的。

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

background:url(bg.jpg)
no-repeat
center
center;
:no-repeat為背景圖不重復，最好是滿足1280寬度的解析度下位滿屏，圖片可以寬度為1280像素，第一個center為水平居中，第二個center為垂直居中，第二個center換成top也就是頂部顯示背景圖。

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

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

4. 網頁製作圖片怎麼居中

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

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

但是實際中實現的效果並不是很完美，由於各瀏覽器的解析都各不相同，所以各瀏覽器都會有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個方法比較滿意，兼容性方面不錯，使用起來的限制也比較小，還有些方法我也都一一測試過，效果都不理想，在各瀏覽器中的差異比較大。另外司徒正美這里也收集了一些方法。

5. 網頁設計讓圖片居中

添加style屬性margin:0 auto;

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

可以用「margin: 0 auto;」和「text-align: center;」是圖片在網頁中居中。

1、新建html文檔，在body標簽中添加div標簽，然後在div標簽中添加img標簽：

7. html中怎樣讓插入的圖片居中

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

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

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

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

8. 網頁設計教程：怎麼讓頁面居中顯示

頁面居中對齊的方式有很多種實現方法。下面，我們來看看怎麼讓頁面居中顯示吧。

• 01

  新建html頁面
  首先打開visual studio軟體，然後新建一張HTML頁面，如下圖所示：

• 02

  main
  然後創建一個div，名稱為main，隨便寫上一些文字，如下圖所示：

• 03

  居中對齊
  然後對body主題設置樣式，代碼為body{ margin:0 auto;width:780px;}如下圖所示：

• 04

  預覽效果
  在瀏覽器中的預覽效果如下圖所示：

9. 在dreamweaver 中怎麼使圖片居中

圖片居中常用的有兩種方法：
1、對img標簽的父標簽添加一個居中代碼（也就是text-align:center）
2、給img的父標簽添加一個寬度，然後給img標簽添加一個（margin:0 auto;）當然還必須給img標簽添加一個寬度或者是將他設置成塊元素（diplay:block）

如果你是在表格中添加img那就只需要給td添加一個居中代碼（text-align:center）就可以了。但是你不要對img添加別的東西，比如浮動什麼的。