javascript - 怎麼實現讓 div 裡面的 img 元素 中心居中, 如下範例圖

Question

Html 程式碼

<style>
    p {
        overflow: hidden ;
    }
    img {
        height: 100% ;
        width: auto ;
    }
</style>

<p>
    <img src='//foo.com/foo.jpg' />
</p>

想要的效果範例圖

#紅色區域是 p, 綠色區域是 img

也就是說 img 比較寬

img的寬不固定, 所以不能用定死 margin-left 這種辦法解決

• 4月20日提問
• 2 評論
• 邀請回答
• 編輯
• 更多
  • 舉報
  • 關閉

#提交評論

#× 評論支援部分Markdown 語法：**bold**_italic_#[link](http://example.com)> 引用`code`- 列表。
同時，被你 @ 的用戶也會收到通知

預設排序 時間排序

13個回答

答案對人有幫助，有參考價值 3 答案沒幫助，是錯誤的答案，答非所問

有一個辦法，但不是用img標籤，而是給p加background-image.

p {
    background-image: url(image-url);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

• 4月20日回答
• 評論
• 編輯

相學長227 聲望

#提交評論

#× 評論支援部分Markdown 語法：**bold**_italic_#[link](http://example.com)> 引用`code`- 列表。
同時，被你 @ 的用戶也會收到通知

答案對人有幫助，有參考價值 1 答案沒幫助，是錯誤的答案，答非所問

定位啊 圖片 marginleft:-(width/2) 至於img的寬度不固定 完全可以js取得 然後動態設定marginleft

• 4月20日回答
• 評論
• 編輯

冷眼看世界177 聲望

#提交評論

#× 評論支援部分Markdown 語法：**bold**_italic_#[link](http://example.com)> 引用`code`- 列表。
同時，被你 @ 的用戶也會收到通知

答案對人有幫助，有參考價值 1 答案沒幫助，是錯誤的答案，答非所問

再包一層。

<p id="wrapper">
    <p id="wrapper2">
        <img src="demo_img3.jpg" alt="" />
    </p>
</p>

#wrapper{
    position: relative;
    width: 200px;
    height: 200px;
}
#wrapper2{
    position: absolute;
    left: 50%;
}
img{
    margin-left: -50%;
}

wrapper2的寬度是img寬度。 img的margin-left就等於自身寬的一半，相當於left:-50%*width

• 4月20日回答 · 4月20日更新
• 2 評論
• 編輯

toBeTheLight4.9k 聲望

#提交評論

#× 評論支援部分Markdown 語法：**bold**_italic_#[link](http://example.com)> 引用`code`- 列表。
同時，被你 @ 的用戶也會收到通知

答案對人有幫助，有參考價值 1 答案沒幫助，是錯誤的答案，答非所問

img是inline-block元素，可以在父級直接text-align: center;

• 5月3日回答
• 評論
• 編輯

hugangqiang117 聲望

#提交評論

#× 評論支援部分Markdown 語法：**bold**_italic_#[link](http://example.com)> 引用`code`- 列表。
同時，被你 @ 的用戶也會收到通知

答案對人有幫助，有參考價值 1 答案沒幫助，是錯誤的答案，答非所問

其實就是想達到水平居中的效果,下面介紹四種實現水平居中的方法（註：下面各個實例中實現的是child元素的對齊操作，child元素的父容器是parent元素）

使用inline-block 和 text-align實作

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}

優點：相容性好；

不足：需要同時設定子元素和父元素

#使用margin:0 auto來實作

.child{
    width:200px;
    margin:0 auto;
}

優點：相容性好

缺點: 需要指定寬度

使用table實作

.child{
    display:table;
    margin:0 auto;
}

優點:只需要對自己進行設定

不足:IE6,7需要調整結構

使用絕對定位實作

.parent{
    position:relative;
}
.child{
    position:absolute;
    left:50%;
    transform:translate(-50%);
}

不足：相容性差,IE9以上可用

#實用flex佈局實作

第一種方法

.parent{
    display:flex;    
    justify-content:center;
}

第二種方法

.parent{
    display:flex;
}
.child{
    margin:0 auto;
}

缺點：相容性差，如果進行大面積的佈局可能會影響效率

• 5月5日回答
• 評論
• 編輯

yogi27 聲望

#提交評論

#× 評論支援部分Markdown 語法：**bold**_italic_#[link](http://example.com)> 引用`code`- 列表。
同時，被你 @ 的用戶也會收到通知

答案對人有幫助，有參考價值 0 答案沒幫助，是錯誤的答案，答非所問

外麵包裹p,在img.onload時，js算出寬度賦給外層。讓外層的內容居中

• 4月21日回答
• 評論
• 編輯

Jessica_loli16 聲望

#提交評論

#× 評論支援部分Markdown 語法：**bold**_italic_#[link](http://example.com)> 引用`code`- 列表。
同時，被你 @ 的用戶也會收到通知

答案對人有幫助，有參考價值 0 答案沒幫助，是錯誤的答案，答非所問

先給p一個 position:relative;
然後給img一個{

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

}
如果不相容c3,可以給img{

position: absolute;
left: 0;
top: 0;
bottom:0;
right:0;
margin:auto;

}

• 4月21日回答
• 評論
• 編輯

clownzoo11 聲望

#提交評論

#× 評論支援部分Markdown 語法：**bold**_italic_#[link](http://example.com)> 引用`code`- 列表。
同時，被你 @ 的用戶也會收到通知

答案對人有幫助，有參考價值 0 答案沒幫助，是錯誤的答案，答非所問

1

img{
    display: block;
    margin: 0 auto;
}

2

p{
    text-align: center;
    
    img{
         display: inline-block;
    }
}

3

p{
    position: relative;
    
    img{
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -(图片高度/2) 0 0 -(图片宽度/2)
    }
}

4 用flex

• 4月21日回答 · 4月21日更新
• 評論
• 編輯

風中孤狼227 聲望

#提交評論

#× 評論支援部分Markdown 語法：**bold**_italic_#[link](http://example.com)> 引用`code`- 列表。
同時，被你 @ 的用戶也會收到通知

答案對人有幫助，有參考價值 0 答案沒幫助，是錯誤的答案，答非所問

外面一層p，裡面一層p限制圖片的尺寸

• 5月3日回答
• 評論
• 編輯

藤西22 聲望

#提交評論

#× 評論支援部分Markdown 語法：**bold**_italic_#[link](http://example.com)> 引用`code`- 列表。
同時，被你 @ 的用戶也會收到通知

答案對人有幫助，有參考價值 0 答案沒幫助，是錯誤的答案，答非所問

不考慮相容問題可以看看 object-fit

#

• 5月3日回答
• 評論
• 編輯

CRIMX865 聲望

#提交評論

#× 評論支援部分Markdown 語法：**bold**_italic_#[link](http://example.com)> 引用`code`- 列表。
同時，被你 @ 的用戶也會收到通知

答案對人有幫助，有參考價值 0 答案沒幫助，是錯誤的答案，答非所問

13

0

0

给我你的怀抱

回覆

全部回覆(13)

我來回復 關閉

黄舟2017-05-16 13:23:39 13樓

有一個辦法，但不是用img標籤，而是給p加background-image.

p {
    background-image: url(image-url);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

點贊 +0

新增回覆 关闭回复

给我你的怀抱

回覆

仅有的幸福2017-05-16 13:23:39 12樓

定位啊 圖片 marginleft:-(width/2) 至於img的寬度不固定 完全可以js取得 然後動態設定marginleft

點贊 +0

新增回覆 关闭回复

给我你的怀抱

回覆

Peter_Zhu2017-05-16 13:23:39 11樓

再包一層。

<p id="wrapper">
    <p id="wrapper2">
        <img src="demo_img3.jpg" alt="" />
    </p>
</p>

#wrapper{
    position: relative;
    width: 200px;
    height: 200px;
}
#wrapper2{
    position: absolute;
    left: 50%;
}
img{
    margin-left: -50%;
}

wrapper2的宽度是img宽度。img的margin-left就等于自身宽的一半，相当于left:-50%*width

點贊 +0

新增回覆 关闭回复

给我你的怀抱

回覆

洪涛2017-05-16 13:23:39 10樓

img是inline-block元素，可以在父級直接text-align: center;

點贊 +0

新增回覆 关闭回复

给我你的怀抱

回覆

刘奇2017-05-16 13:23:39 9樓

其實就是想達到水平居中的效果,下面介紹四種實現水平居中的方法（註：下面各個實例中實現的是child元素的對齊操作，child元素的父容器是parent元素）

使用inline-block 和 text-align實作

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}

優點：相容性好；

不足：需要同時設定子元素和父元素

使用margin:0 auto來實作

.child{
    width:200px;
    margin:0 auto;
}

優點：相容性好

缺點: 需要指定寬度

使用table實現

.child{
    display:table;
    margin:0 auto;
}

優點:只需要設定自己

不足:IE6,7需要調整結構

使用絕對定位實現

.parent{
    position:relative;
}
.child{
    position:absolute;
    left:50%;
    transform:translate(-50%);
}

不足：相容性差,IE9以上可用

實用flex佈局實作

第一種方法

.parent{
    display:flex;    
    justify-content:center;
}

第二種方法

.parent{
    display:flex;
}
.child{
    margin:0 auto;
}

缺點：相容性差，如果進行大面積的佈局可能會影響效率

點贊 +0

新增回覆 关闭回复

给我你的怀抱

回覆

过去多啦不再A梦2017-05-16 13:23:39 8樓

外麵包裹p,在img.onload時，js算出寬度賦給外層。讓外層的內容居中

點贊 +0

新增回覆 关闭回复

给我你的怀抱

回覆

Ty802017-05-16 13:23:39 7樓

先給p一個 position:relative;
然後給img一個{

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

}
如果不相容c3,可以給img{

position: absolute;
left: 0;
top: 0;
bottom:0;
right:0;
margin:auto;

}

點贊 +0

新增回覆 关闭回复

给我你的怀抱

回覆

仅有的幸福2017-05-16 13:23:39 6樓

1

雷雷

2

雷雷

3

雷雷

4 使用彈性

點贊 +0

新增回覆 关闭回复

给我你的怀抱

回覆

淡淡烟草味2017-05-16 13:23:39 5樓

外面一層p，裡面一層p限制圖片的尺寸

點贊 +0

新增回覆 关闭回复

给我你的怀抱

回覆

巴扎黑2017-05-16 13:23:39 4樓

不考慮相容問題可以看看 object-fit

點贊 +0

新增回覆 关闭回复

给我你的怀抱

回覆

Answer 1

有一個辦法，但不是用img標籤，而是給p加background-image.

p {
    background-image: url(image-url);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

Answer 2

定位啊 圖片 marginleft:-(width/2) 至於img的寬度不固定 完全可以js取得 然後動態設定marginleft

Answer 3

再包一層。

<p id="wrapper">
    <p id="wrapper2">
        <img src="demo_img3.jpg" alt="" />
    </p>
</p>

#wrapper{
    position: relative;
    width: 200px;
    height: 200px;
}
#wrapper2{
    position: absolute;
    left: 50%;
}
img{
    margin-left: -50%;
}

wrapper2的宽度是img宽度。img的margin-left就等于自身宽的一半，相当于left:-50%*width

Answer 4

img是inline-block元素，可以在父級直接text-align: center;

Answer 5

其實就是想達到水平居中的效果,下面介紹四種實現水平居中的方法（註：下面各個實例中實現的是child元素的對齊操作，child元素的父容器是parent元素）

使用inline-block 和 text-align實作

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}

優點：相容性好；

不足：需要同時設定子元素和父元素

使用margin:0 auto來實作

.child{
    width:200px;
    margin:0 auto;
}

優點：相容性好

缺點: 需要指定寬度

使用table實現

.child{
    display:table;
    margin:0 auto;
}

優點:只需要設定自己

不足:IE6,7需要調整結構

使用絕對定位實現

.parent{
    position:relative;
}
.child{
    position:absolute;
    left:50%;
    transform:translate(-50%);
}

不足：相容性差,IE9以上可用

實用flex佈局實作

第一種方法

.parent{
    display:flex;    
    justify-content:center;
}

第二種方法

.parent{
    display:flex;
}
.child{
    margin:0 auto;
}

缺點：相容性差，如果進行大面積的佈局可能會影響效率

Answer 6

外麵包裹p,在img.onload時，js算出寬度賦給外層。讓外層的內容居中

Answer 7

先給p一個 position:relative;
然後給img一個{

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

}
如果不相容c3,可以給img{

position: absolute;
left: 0;
top: 0;
bottom:0;
right:0;
margin:auto;

}

Answer 8

1

雷雷

2

雷雷

3

雷雷

4 使用彈性

Answer 9

外面一層p，裡面一層p限制圖片的尺寸

Answer 10

不考慮相容問題可以看看 object-fit