問(wèn)題描述

Html 代碼

<style> p {overflow: hidden ; } img {height: 100% ;width: auto ; }</style><p> <img src=’//foo.com/foo.jpg’ /></p>想要的效果示例圖

紅色區(qū)域是 p, 綠色區(qū)域是 img

也就是說(shuō) img 比較寬

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

4月20日提問(wèn) 2 評(píng)論 邀請(qǐng)回答編輯更多 舉報(bào) 關(guān)閉

提交評(píng)論

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

默認(rèn)排序 時(shí)間排序

13個(gè)回答

答案對(duì)人有幫助，有參考價(jià)值3 答案沒(méi)幫助，是錯(cuò)誤的答案，答非所問(wèn)

有一個(gè)辦法，但不是用img標(biāo)簽，而是給p加background-image.

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

4月20日回答 評(píng)論編輯

相學(xué)長(zhǎng)227 聲望

提交評(píng)論

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

答案對(duì)人有幫助，有參考價(jià)值1 答案沒(méi)幫助，是錯(cuò)誤的答案，答非所問(wèn)

定位啊 圖片 marginleft:-(width/2) 至于img的寬度不固定 完全可以js獲取 然后動(dòng)態(tài)設(shè)置marginleft

4月20日回答 評(píng)論編輯

冷眼看世界177 聲望

提交評(píng)論

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

答案對(duì)人有幫助，有參考價(jià)值1 答案沒(méi)幫助，是錯(cuò)誤的答案，答非所問(wèn)

再包一層。

<p id='wrapper'> <p id='wrapper2'><img src='http://m.b3g6.com/wenda/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就等于自身寬的一半，相當(dāng)于left:-50%*width

4月20日回答 · 4月20日更新2評(píng)論編輯

toBeTheLight4.9k 聲望

提交評(píng)論

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

答案對(duì)人有幫助，有參考價(jià)值1 答案沒(méi)幫助，是錯(cuò)誤的答案，答非所問(wèn)

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

5月3日回答 評(píng)論編輯

hugangqiang117 聲望

提交評(píng)論

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

答案對(duì)人有幫助，有參考價(jià)值1 答案沒(méi)幫助，是錯(cuò)誤的答案，答非所問(wèn)

其實(shí)就是想達(dá)到水平居中的效果,下面介紹四種實(shí)現(xiàn)水平居中的方法（注：下面各個(gè)實(shí)例中實(shí)現(xiàn)的是child元素的對(duì)齊操作，child元素的父容器是parent元素）使用inline-block 和 text-align實(shí)現(xiàn)

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

優(yōu)點(diǎn)：兼容性好；不足：需要同時(shí)設(shè)置子元素和父元素

使用margin:0 auto來(lái)實(shí)現(xiàn)

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

優(yōu)點(diǎn)：兼容性好缺點(diǎn): 需要指定寬度

使用table實(shí)現(xiàn)

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

優(yōu)點(diǎn):只需要對(duì)自身進(jìn)行設(shè)置不足:IE6,7需要調(diào)整結(jié)構(gòu)

使用絕對(duì)定位實(shí)現(xiàn)

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

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

實(shí)用flex布局實(shí)現(xiàn)第一種方法

.parent{ display:flex;justify-content:center;}第二種方法

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

缺點(diǎn)：兼容性差，如果進(jìn)行大面積的布局可能會(huì)影響效率

5月5日回答 評(píng)論編輯

yogi27 聲望

提交評(píng)論

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

答案對(duì)人有幫助，有參考價(jià)值0 答案沒(méi)幫助，是錯(cuò)誤的答案，答非所問(wèn)

外面包裹p,在img.onload時(shí)，js算出寬度賦給外層。讓外層的內(nèi)容居中

4月21日回答 評(píng)論編輯

Jessica_loli16 聲望

提交評(píng)論

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

答案對(duì)人有幫助，有參考價(jià)值0 答案沒(méi)幫助，是錯(cuò)誤的答案，答非所問(wèn)

先給p一個(gè) position:relative;然后給img一個(gè){

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日回答 評(píng)論編輯

clownzoo11 聲望

提交評(píng)論

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

答案對(duì)人有幫助，有參考價(jià)值0 答案沒(méi)幫助，是錯(cuò)誤的答案，答非所問(wèn)

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日更新 評(píng)論編輯

風(fēng)中孤狼227 聲望

提交評(píng)論

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

答案對(duì)人有幫助，有參考價(jià)值0 答案沒(méi)幫助，是錯(cuò)誤的答案，答非所問(wèn)

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

5月3日回答 評(píng)論編輯

藤西22 聲望

提交評(píng)論

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

答案對(duì)人有幫助，有參考價(jià)值0 答案沒(méi)幫助，是錯(cuò)誤的答案，答非所問(wèn)

不考慮兼容問(wèn)題可以看看 object-fit

5月3日回答 評(píng)論編輯

CRIMX865 聲望

提交評(píng)論

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

答案對(duì)人有幫助，有參考價(jià)值0 答案沒(méi)幫助，是錯(cuò)誤的答案，答非所問(wèn)