div中怎麼加入圖片且設置居中

① div中圖片怎麼居中

試一下margin: 0 auto;

② 在DIV裡面怎麼讓圖片居中

問題中的居中是指水平居中，還是垂直居中？
水平居中：div設置：text-align:center;
img設置：width:圖片寬度; margin:0 auto;

垂直居中：div設置：position:relative;
img設置：position:absolute; top:50%; height:圖片高度; margin-top:圖片高度的一半;

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

（1）第一種：用vertical-align
（2）第二種：flex布局（注意瀏覽器兼容性）
（3）position:absolute;絕對定位方式
（4）使用display:table-cell配合vertical-align:center
思路：利用text-align屬性將圖片水平居中，然後設置padding-top的值使其垂直居中。
思路：只用padding屬性，通過計算求得居中

④ 如何讓圖片在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實現居中

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

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

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

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

（1）第一種：用vertical-align

（2）第二種：flex布局（注意瀏覽器兼容性）

（3）position:absolute;絕對定位方式

（4）使用display:table-cell配合vertical-align:center

思路：利用text-align屬性將圖片水平居中，然後設置padding-top的值使其垂直居中。

思路：只用padding屬性，通過計算求得居中

⑦ 如何讓圖片在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實現居中

⑧ 怎麼讓DIV在HTML插入圖片 居中顯示

水平居中：div設置：text-align:center;
img設置：width:圖片寬度; margin:0 auto;

垂直居中：div設置：position:relative;
img設置：position:absolute; top:50%; height:圖片高度; margin-top:圖片高度的一半;

<div> 的定義和用法
<div> 可定義文檔中的分區或節（division/section）。
<div> 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。
如果用 id 或 class 來標記 <div>，那麼該標簽的作用會變得更加有效。
用法
<div> 是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 <div> 固有的唯一格式表現。可以通過 <div> 的 class 或 id 應用額外的樣式。
不必為每一個 <div> 都加上類或 id，雖然這樣做也有一定的好處。
可以對同一個 <div> 元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解為某一類元素），而 id 用於標識單獨的唯一的元素。

⑨ 在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實現居中