CSS中怎么让图片在盒子里居中呢？ CSS中怎么让图片在盒子里居中呢？
\u600e\u6837\u7528css\u53ea\u8ba9div\u4e2d\u7684\u56fe\u7247\u5c45\u4e2d\uff1f1\u3001\u6253\u5f00\u5728\u7ebf\u5199\u524d\u7aef\u4ee3\u7801\u7684\u7f51\u7ad9\u5982jsrun\u6216\u8005jsfiddle\u3002
\u76ee2\u3001\u6807\u662f\u505a\u4e00\u4e2a\u5982\u56fe\u6240\u793a\u7684\u6548\u679c\uff0c\u4e0d\u540c\u5927\u5c0f\u7684\u56fe\u7247\u3002
3\u3001\u6bcf\u4e2a\u65b9\u6846\u7684html \u5982\u4e0b\uff0c
4\u3001css\u5982\u4e0b\uff0c\u5176\u4e2d\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u4e0d\u8981\u8bbe\u7f6e\u6700\u5916\u5c42div\u7684\u5927\u5c0f\uff0c\u53ea\u8bbe\u7f6espan\u7684\u5927\u5c0f\uff0c\u8ba9span\u7684\u5927\u5c0f\u51b3\u5b9adiv\u7684\u5927\u5c0f\u3002
\u5176\u4e2d
display: table-cell;
text-align: center;
vertical-align: middle;
\u8fd93\u884c\u51b3\u5b9a\u5c45\u4e2d\u6548\u679c\u3002
\u5176\u4e2d
img {
max-width: 100%;
max-height: 100%;
}
\u7684\u76ee\u7684\u662f\u8ba9\u56fe\u7247\u53ef\u4ee5\u7f29\u653e\u800c\u6bd4\u4f8b\u4e0d\u53d8\u3002
div {
float:left;
margin:5px;
padding:5px;
border:1px solid #000;
}
span {
font-size: 0;
width: 150px;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
max-width: 100%;
max-height: 100%;
}
5\u3001\u6548\u679c\u5982\u4e0b\uff0c\u5f88\u597d\u7684\u5b9e\u73b0\u5c45\u4e2d\u3002
6\u3001\u4e0a\u9762\u662fdiv\u4e3afloat\u7684\u60c5\u51b5
div\u5982\u679c\u662fabsolute\u6216fixed\u4e5f\u53ef\u4ee5\u6b63\u5e38\u8868\u73b0\u3002
\u53ea\u6709\u4e00\u4e2adiv\u7684\u60c5\u51b5\u4e0b\uff0c\u4ee3\u7801\u5982\u4e0b
div {
margin:5px;
padding:5px;
border:1px solid #000;
position: absolute;
left:100px;
top:100px;
}
span {
font-size: 0;
width: 150px;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
max-width: 100%;
max-height: 100%;
}
7\u3001\u8fd9\u5f20\u56fe\u7247\u4ecd\u7136\u662f\u5c45\u4e2d\u7684\uff0c\u6ca1\u6709\u6536\u5230\u7236\u5bb9\u5668\u7684\u5f71\u54cd\u3002
\u53ef\u4ee5\u4e3a\u76d2\u5b50\u6dfb\u52a0\u201ctext-align: center;\u201d\u6837\u5f0f\u4f7f\u56fe\u7247\u5728\u76d2\u5b50\u4e2d\u5c45\u4e2d\u3002
1\u3001\u65b0\u5efahtml\u6587\u6863\uff0c\u5728body\u6807\u7b7e\u4e2d\u6dfb\u52a0\u4e00\u4e2adiv\u76d2\u5b50\uff0c\u7136\u540e\u5728\u8fd9\u4e2adiv\u76d2\u5b50\u4e2d\u6dfb\u52a0\u4e00\u5f20\u56fe\u7247\uff1a
2\u3001\u4e3adiv\u76d2\u5b50\u548c\u56fe\u7247\u6dfb\u52a0\u4e00\u4e9b\u6837\u5f0f\uff0c\u8fd9\u65f6\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u56fe\u7247\u4f1a\u5411\u76d2\u5b50\u7684\u5de6\u4e0a\u89d2\u5bf9\u9f50\uff1a
3\u3001\u4e3adiv\u76d2\u5b50\u6dfb\u52a0\u201ctext-align: center;\u201d\u6837\u5f0f\uff0c\u8fd9\u65f6\u56fe\u7247\u4f1a\u5728div\u76d2\u5b50\u4e2d\u5c45\u4e2d\u5bf9\u9f50\uff1a
写上这个属性
没有办法，图片居中本来就是一个难题，需要加上其他的容器来协助，再加上css hack，才能实现居中
绛旓細瑕佽鐩掑瓙灞呬腑闇瑕佽缃:margin: 0 auto銆傚綋鐒堕渶瑕佺粰鐩掑瓙璁剧疆瀹藉害锛屼笉鐒剁洅瀛愰粯璁ょ殑瀹藉害鏄埗瀹瑰櫒瀹藉害銆備篃鏈夊叾浠栨柟寮忥紝姣斿鐖跺鍣ㄨ缃甦isplay: flex; justify-content: center涔熸槸鍙互鐨勩傛柟娉曚笉灏戣兘杈惧埌鏁堟灉灏卞ソ浜嗐
绛旓細缃戦〉璁捐涓殑css鐩掑瓙鍐呭灞呬腑锛屼綘鍙互鍏堝啓2涓猟iv,绗竴涓寘瑁圭潃绗簩涓紝鐒跺悗鍦ㄨ缃涓涓殑瀹介珮锛屽湪閫氳繃margin锛0 auto锛涘眳涓氨琛岋紝margin鐨勬剰鎬濆氨鏄窛绂绘祻瑙堝櫒鐨勫杈硅窛锛屽鍥:杩欓噷鎴戝啓娈典唬鐮侊細 缃戦〉灞呬腑 div1{ widrh:960px;height:700px;mrgin:0 auto;} div2{ widrh:660px;height:300px...
绛旓細4銆佹渶鍚庢垜浠繍琛岄〉闈㈢▼搴忥紝浣犲氨浼氬湪椤甸潰涓湅鍒皃涓殑鏂囧瓧姘村钩鍨傜洿閮灞呬腑浜嗐俬tmlcss閲岄潰锛屼竴涓猵閲岀殑ul鎬庝箞璁浠栧眳涓榻愶紵p閲岀殑ul涓嬮潰鐨刲i灞呬腑瀵归綈锛屽叧閿偣濡備笅锛1銆丆SS璁剧疆濂絃i鐨勫搴2銆丩i鐨刢ss鍔犱笂灞呬腑浠ｇ爜text-align:center銆備緥瀛愬涓嬶細灞呬腑鏂囧瓧1 灞呬腑鏂囧瓧2 灞呬腑鏂囧瓧3 灞呬腑鏂囧瓧4 灞呬腑鏂囧瓧5 灞呬腑鏂囧瓧...
绛旓細閫氳繃vertical-align:middle瀹炵幇CSS鍨傜洿灞呬腑鏄渶甯镐娇鐢ㄧ殑鏂规硶锛屼絾鏄湁涓鐐归渶瑕佹牸澶栨敞鎰忥紝vertical鐢熸晥鐨勫墠鎻愭槸鍏冪礌鐨刣isplay锛歩nline-block銆傚洜涓篿nline-block鍙互鍏煎叿琛屽唴鍏冪礌鍜屽潡绾у厓绱犵殑鐗圭偣锛岃兘澶熶娇寰楀厓绱犳湁瀹藉害鍜岄珮搴︺備粠鑰鍦ㄧ洅瀛愬唴鑳藉瀹炵幇灞呬腑 閫氳繃display:flex瀹炵幇CSS鍨傜洿灞呬腑鐨鏂规硶鏄粰鐖跺厓绱燿isplay:flex;...
绛旓細绗竴绉嶆柟寮忥細璁剧疆body 灞呬腑銆鍦–SS涓鐨勪唬鐮佹槸锛坆ody{text-align:center;}锛夌浜岀鏂瑰紡锛氱敤鐩掑瓙妯″瀷锛岄鍏堣缃竴涓狣iv 锛岃繖涓狣IV鐨勫搴︿负100%锛岀劧鍚庡湪杩欎釜DIV灞呬腑锛岄偅涔堝湪杩欎釜DIV涓姞鐨勫唴瀹瑰氨灞呬腑鏄剧ず锛屼唬鐮佸涓嬶細 CSS 鏍峰紡浠ｇ爜锛 .div1{text-align:center;width:100%;} .div2{width:980px;bac...
绛旓細2銆佹墦寮DW锛岄夋嫨鏂板缓HTML鏂囦欢銆3銆侀鍏堝厛寤虹珛涓変釜鐩掑瓙锛屽ぇ鐩掑瓙鍖呭惈涓や釜灏忕洅瀛愶紝濡傚浘銆4銆佺劧鍚庡啀瀵圭粏鑺傝繘琛屽畬鍠勶紝宸︿晶涓烘枃瀛楀尯锛岀洿鎺ュ湪鎵寤虹珛鐨刣iv涓坊鍔犳枃瀛楀嵆鍙紝褰撶劧涔熷彲浠ユ坊鍔犱竴浜涙枃瀛楁爣绛撅紝鍙充晶娣诲姞鐨勬棤搴忓垪琛紝鏂逛究鍥剧墖鐨鎻掑叆鎺掑簭銆5銆佸唴瀹瑰尯娣诲姞瀹屾垚鍚庯紝鍦╟ss鏍峰紡涓坊鍔犺缁嗕慨楗帮紝濡傚浘鎵绀恒
绛旓細2銆佹坊鍔犲ソ鍩烘湰鍏冪礌鏍囩鍚庡湪body閲屾坊鍔爌鍏冪礌锛岀劧鍚庡湪p鍏冪礌閲岄潰娣诲姞涓涓〃鏍煎厓绱犮3銆佹帴涓嬫潵閰嶇疆p鍏冪礌鏍峰紡鍜岃〃鏍煎厓绱犳牱寮忥紝浣垮緱鏁堟灉鍙互鏄庢樉浣撶幇鍑烘潵锛岃繖閲屼娇鐢ㄧ殑鏄鍐呭紡锛屼篃鍙互浣跨敤琛屽寮忓拰澶栭儴寮忋傚叾涓牳蹇冧唬鐮侀兘鏄細margin锛歛uto銆css鎬庝箞璁涓涓猣orm鏍囩姘村钩鍨傜洿灞呬腑鏄剧ず锛熼渶瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆...
绛旓細content="text/html; charset=utf-8" />.head{width:800px; height:200px; background:#003399; margin:0 auto;}鏅畨缃戠粶鎴戜滑鍙互浣跨敤 margin:0 auto; 瀹炵幇灞呬腑
绛旓細閭ｅ氨鐢ㄥ畾浣嶆潵鍋氬晩锛岀劧鍚庣敤z-index鏉ュ仛浠栦滑鐨勫眰绾у叧绯汇傜埗绾х敤relative锛宨mg鏍囩鐢╝bsolute銆
绛旓細div灞呬腑浠ｇ爜搴旂敤锛屼负浜嗚瀵焏iv灞呬腑鏁堟灉锛屾垜浠div璁剧疆涓涓猟iv鍛藉悕涓衡.div鈥濆湪html涓璬iv鏍囩鍐呬娇鐢╟lass=鈥渄iv鈥,璁剧疆鍏跺搴︿负400px;楂樺害涓100px锛岃竟妗嗕负绾㈣壊銆備互渚挎垜浠瀵熸晥鏋溿1銆佸畬鏁磆tml+css浠ｇ爜 div灞呬腑 鏁堟灉鍥锛氭灞呬腑鏂规硶鏄div灞呬腑鏁堟灉瀹岀編鍏煎鍚勫ぇ骞冲彴銆佸吋瀹瑰悇澶ф祻瑙堝櫒锛屾棤璁洪珮鐗堟湰ie杩樻槸楂...
