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

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

方法如下：

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

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

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個方法比較滿意，兼容性方面不錯，使用起來的限制也比較小，還有些方法我也都一一測試過，效果都不理想，在各瀏覽器中的差異比較大。另外司徒正美這里也收集了一些方法。

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

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

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

❹ 如何讓圖片在div中居中顯示

方法一：
思路：利用text-align屬性將圖片水平居中，然後設置padding-top的值使其垂直居中。
結構如下：
<div>
<img
src="images/tt.gif"
width="150"
height="100"
/>
</div>
CSS樣式如下：
div
{width:300px;
height:150px;
background-color:#CCC;
border:#000
1px
solid;
text-align:center;
padding-top:50px;}
運行結果如下：釋義：
圖片的尺寸為150x100px，DIV的大小為300x200px；
background-color:#CCC;
border:#000
1px
solid;為DIV加個邊框和背景色，便於觀察效果。
text-align:center,實現圖片的水平居中；padding-top:50px，50px這個數值是經過計算得到的，padding-top的值具體演算法如下：（DIV的高度
–
圖片的高度）/2，但這里要注意，根據盒模型原理，我們還要將DIV原來的高度200減去padding-top的值，這樣顯示的才是正確的，否則DIV會變高。


方法二：
思路：只用padding屬性，通過計算求得居中
結構代碼同上；
CSS樣式如下：
div
{width:225px;
height:150px;
background-color:#eee;
border:#000
1px
solid;
padding-top:50px;
padding-left:75px;}
備註：這里DIV的寬高計算都遵循盒模型原理，計算方法同上。


方法三：
思路：
利用圖片的margin屬性將圖片水平居中，利用DIV的padding屬性將圖片垂直居中。
結構代碼同上；
CSS代碼如下：
div
{width:300px;
height:150px;
background-color:#eee;
padding-top:50px;
border:#000
1px
solid;}
img
{display:block;
margin:0
auto;}
備註：
Img是內聯元素，要設置其margin屬性使其居中，就要將其轉換為塊元素display:block;然後利用margin:0
auto;實現圖片的水平居中；（有的設計師為圖片再加個div標簽，然後通過div標簽的margin實現居中

❺ html怎麼才可以讓圖片居中

在使用HTML繪制頁面的時候，適當的圖文編排可以使內容更具有吸引力，下面就介紹下使HTML中圖片居中的簡單辦法

• 01

  打開記事本或者其他的代碼編輯器，新建一個HTML文件，如下圖

• 02

  使用瀏覽器打開這個HTML文件，可以看到如下圖所示的效果，圖片在整個頁面的左方

• 03

  使圖片居中，可以通過HTML中的align屬性來控制，在圖片的div中加入align=「center」

• 04

  再次在瀏覽器中打開這個頁面文件，效果如下，圖片已經居中顯示

• 05

  我們還可以通過樣式文件來實現圖片的居中顯示，這里我們以class選擇器為例，為圖片層加入class="img_center"，然後在style標簽中定義樣式，如下圖

• 06

  在瀏覽器中打開這個文件，效果如下，發現圖片也可以居中顯示

❻ 網頁讓背景圖片滿屏顯示，居中顯示！

直接用no-repeat就可以了
body{background:url(http//:圖片位置)參數}/*可識別的圖片格式為jpg、gif、bmp等*/
主要參數：
repeat：背景圖像在縱向和橫向上平鋪
no-repeat：背景圖像不平鋪
repeat-x：背景圖像在橫向上平鋪
repeat-y：背景圖像在縱向平鋪
實例
background:#0066ccurl(圖片)no-repeatfixedcenter;
或
topright表示圖片與瀏覽器的頂邊和右邊對齊
bottomleft表示圖片與瀏覽器的底邊和左邊對齊

❼ word圖片怎麼居中 word圖片如何居中

1、word 2013版本中的圖片居中為具體的例子，操作的步驟如下：

2、首先在word的主頁面中選擇你要居中的圖片，然後滑鼠右擊圖片，並且在彈出來的頁面中選擇【大小和位置】。

3、然後在彈出來的操作頁面中點擊【位置】。

4、最後在位置的操作頁面中，將對齊方式設置為【居中】即可實現圖片居中的要求了。

❽ 插入一個網頁圖片如何居中

網頁圖片居中，只需要給插入圖片的DIV添加css屬性text-align:center;
舉例：
<div style="width: 500px; height: 200px; border: solid 1px red; text-align: center">
<img src="http://xxxxx.xx />
</div>
最簡單的居中text-align: center。
使用center標簽也可設置居中。

❾ html中使圖片居中的代碼是什麼

html中使圖片居中的代碼是：<img src="" alt="" align="center" />

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

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

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