html中插入张图片如何让它居中？ 如何使html中插入的图片居中？
html\u4e2d\u600e\u6837\u8ba9\u63d2\u5165\u7684\u56fe\u7247\u5c45\u4e2d\uff1f\u9700\u8981\u5c06\u65b0\u5efa\u7684html\u9875\u9762\u8fdb\u884c\u4e00\u4e2a\u4fdd\u5b58\uff0c\u7136\u540e\u56de\u5230DW\u8fdb\u884c\u7f16\u8f91\uff0c\u5728body\u90e8\u5206\u65b0\u5efa\u4e00\u4e2adiv\u6807\u7b7e\uff0c\u5e76\u5728\u5176\u4e2d\u63d2\u5165\u4e00\u5f20img\u56fe\u7247\u3002\u5e76\u7ed9div\u6dfb\u52a0\u7b80\u5355\u7684css\u6837\u5f0f\uff0c\u518d\u5c06\u56fe\u7247\u5957\u5728\u4e00\u4e2ap\u6216\u8005span\u6807\u7b7e\u4e2d\uff0c\u7ed9\u6807\u7b7e\u6dfb\u52a0\u4e00\u4e2atext-align:center\u5c5e\u6027\uff0c\u5c31\u53ef\u4ee5\u4e86\u3002\u5177\u4f53\u6b65\u9aa4\u5982\u4e0b\uff1a
\u9996\u5148\u6211\u4eec\u9700\u8981\u6253\u5f00\u7535\u8111\uff0c\u627e\u5230DW\u8f6f\u4ef6\u7684\u5feb\u6377\u952e\uff0c\u53cc\u51fb\u6253\u5f00\u4e4b\u540e\uff0c\u65b0\u5efa\u4e00\u4e2ahtml\u9875\u9762\u3002
\u7136\u540e\u6211\u4eec\u4f1a\u8fdb\u5165\u5230DW\u7684HTML\u9875\u9762\u7684\u7f16\u8f91\u9875\u9762\uff0c\u6211\u4eec\u9700\u8981\u5c06\u65b0\u5efa\u7684html\u9875\u9762\u8fdb\u884c\u4e00\u4e2a\u4fdd\u5b58\u3002
\u5c06\u7f51\u9875\u4fdd\u5b58\u597d\u4e4b\u540e\uff0c\u6211\u4eec\u9700\u8981\u91cd\u65b0\u56de\u5230DW\u7684\u7f16\u8f91\u9875\u9762\u3002
\u7136\u540e\u6211\u4eec\u9700\u8981\u5728body\u90e8\u5206\u65b0\u5efa\u4e00\u4e2adiv\u6807\u7b7e\uff0c\u5e76\u5728\u5176\u4e2d\u63d2\u5165\u4e00\u5f20img\u56fe\u7247\u3002\u5e76\u7ed9div\u6dfb\u52a0\u7b80\u5355\u7684css\u6837\u5f0f\u3002
\u6211\u4eec\u5728\u6d4f\u89c8\u5668\u4e2d\u67e5\u770b\u6548\u679c\uff0c\u53ef\u4ee5\u53d1\u73b0\u56fe\u7247\u662f\u9ed8\u8ba4\u5de6\u5bf9\u9f50\u7684\uff0c\u5e76\u6ca1\u6709\u5728div\u7684\u6b63\u4e2d\u592e\u663e\u3002
\u6b64\u65f6\u4e3a\u56fe\u7247\u6dfb\u52a0\u5c45\u4e2d\u5c5e\u6027\u4e5f\u662f\u6ca1\u6709\u7528\u7684\uff0c\u6211\u4eec\u9700\u8981\u5c06\u56fe\u7247\u5957\u5728\u4e00\u4e2ap\u6216\u8005span\u6807\u7b7e\u4e2d\uff0c\u7ed9\u6807\u7b7e\u6dfb\u52a0\u4e00\u4e2atext-align:center\u5c5e\u6027\u3002
\u8fd9\u6837\u4fee\u6539\u4e4b\u540e\uff0c\u6211\u4eec\u518d\u6b21\u56de\u5230\u6d4f\u89c8\u5668\u4e2d\u5237\u65b0\u9875\u9762\uff0c\u53ef\u4ee5\u770b\u5230\u56fe\u7247\u5df2\u7ecf\u662f\u5728div\u4e2d\u5c45\u4e2d\u663e\u793a\u4e86\u3002
\u53c2\u8003\u8d44\u6599
\u767e\u5ea6\u7ecf\u9a8c.\u767e\u5ea6\u7ecf\u9a8c[\u5f15\u7528\u65f6\u95f42017-12-28]
需要将新建的html页面进行一个保存，然后回到DW进行编辑，在body部分新建一个div标签，并在其中插入一张img图片。并给div添加简单的css样式，再将图片套在一个p或者span标签中，给标签添加一个text-align:center属性，就可以了。具体步骤如下：
<div align="center"><img src="2008081801331242.gif"/></div>
绛旓細1銆佹墦寮璁颁簨鏈垨鑰呭叾浠栫殑浠ｇ爜缂栬緫鍣紝鏂板缓涓涓狧TML鏂囦欢锛屽涓嬪浘 2銆佷娇鐢ㄦ祻瑙堝櫒鎵撳紑杩欎釜HTML鏂囦欢锛屽彲浠ョ湅鍒板涓嬪浘鎵绀虹殑鏁堟灉锛屽浘鐗囧湪鏁翠釜椤甸潰鐨勫乏鏂 3銆浣垮浘鐗灞呬腑锛屽彲浠ラ氳繃HTML涓鐨刟lign灞炴ф潵鎺у埗锛屽湪鍥剧墖鐨刣iv涓姞鍏lign=鈥渃enter鈥4銆佸啀娆″湪娴忚鍣ㄤ腑鎵撳紑杩欎釜椤甸潰鏂囦欢锛屾晥鏋滃涓嬶紝鍥剧墖宸茬粡灞呬腑鏄剧ず 5銆...
绛旓細绗竴绉嶆柟娉曪細璁剧疆鐖跺厓绱犲唴鏂囧瓧灞呬腑鍗冲彲璁╁浘鐗囧眳涓銆俥lement{text-align:center;} 绗簩绉嶆柟娉曪細璁剧疆鍥剧墖涓哄潡绾у厓绱狅紝璁剧疆宸﹀彸margin涓篴uto鍗冲彲璁╁浘鐗囧眳涓俰mg{display:block;margin-left:auto;margin-right:auto;}
绛旓細01鎵撳紑璁颁簨鏈垨鍏朵粬浠ｇ爜缂栬緫鍣紝鍒涘缓涓涓柊鐨凥TML鏂囦欢锛屽涓嬪浘鎵绀 02鐢ㄦ祻瑙堝櫒鎵撳紑杩欎釜HTML鏂囦欢锛屽彲浠ョ湅鍒颁笅鍥炬墍绀虹殑鏁堟灉銆傝繖骞呯敾鍦ㄦ暣椤电殑宸﹁竟銆03鍥剧墖灞呬腑鍙互閫氳繃HTML涓鐨刟lign灞炴ф潵鎺у埗銆傚湪鍥剧墖鐨刣iv涓坊鍔燼lign="center"銆04鍦ㄦ祻瑙堝櫒涓啀娆℃墦寮杩欎釜椤甸潰鏂囦欢锛屾晥鏋滃涓嬨傚浘鐗囧凡缁忔樉绀哄湪涓棿銆05鎴戜滑杩...
绛旓細鍏堢湅涓嬫垜浠鐨刪tml浠ｇ爜锛屽湪涓涓猟iv閲屾斁鍏ヤ竴涓猧mg鍥剧墖鏍囩銆傚啀鐪嬩笅鎴戜滑div鐨勬牱寮忥紝涓昏鍦版柟鏄垜浠缃簡div鐨勫搴︼紝涓400px锛屽鍥炬墍绀虹殑浠ｇ爜銆傜幇鍦ㄧ湅涓嬮〉闈紝鍙互鐪嬪埌锛岀幇鍦鐨勫浘鐗鏄潬宸︽樉绀虹殑锛屽苟娌″眳涓傝璁﹊mg鏍囩鐨勫浘鐗囧眳涓紝鎴戜滑鍙互鍔犱笂涓琛屾牱寮忎唬鐮侊細text-align: center;灏辫浜嗐傚啀娆＄湅涓嬮〉闈紝鍙...
绛旓細涓銆佷紶缁烪TML璁╁浘鐗囨í鍚戞按骞冲眳涓柟娉 鐩存帴鍦ㄦ爣绛惧璞″唴鍔犫渁lign="center"鈥濆嵆鍙瀵硅薄鍐呭浘鐗囨í鍚戞按骞冲眳涓樉绀銆俛lign="center"浣跨敤鏂规硶锛<divalign="center"></div> align="center"灞呬腑鍥剧墖DIV+CSS瀹炰緥浠ｇ爜锛歨tmlalign="center"鍥剧墖灞呬腑瀹炰緥鎴浘 浜屻丆SS璁╁浘鐗囦腑DIV瀵硅薄鍐呮按骞冲眳涓 1銆佸疄渚婬TML+CSS瀹屾暣...
绛旓細涓鑸潵璇村彲浠ョ敤CSS涓殑鈥渢ext-align:center灞炴э紝margin:0 auto鎴栧畾浣嶅睘鎬р濆氨鍙互灞呬腑銆備絾鏄富瑕佺湅鏄湅浣犵殑椤甸潰甯冨眬鏄鎬庢牱鐨锛屾槸鍚︾敤浜嗗畾浣 1銆乮mg鏍囩涓殑align灞炴т笉鏄畾涔鍥惧儚鐨浣嶇疆锛岃屾槸瀹氫箟鍥惧儚涓庡懆鍥存枃瀛楃殑浣嶇疆锛屽苟涓斾笉鎺ㄨ崘浣跨敤杩欎釜灞炴с2銆佽缁檌mg瀹氫箟涓涓埗鏍囩锛岃杩欎釜鐖舵爣绛閲岄潰鐨鍐呭灞呬腑锛...
绛旓細鏂规硶/姝ラ 鏂板缓涓涓html鏂囦欢锛屽懡鍚嶄负test.html锛岀敤浜庤瑙ｇ敤css鎬庝箞璁涓寮犲浘鐗鍦ㄧ綉椤典腑灞呬腑鏄剧ず銆傝鐐瑰嚮杈撳叆鍥剧墖鎻忚堪 鍦╰est.html鏂囦欢鍐咃紝浣跨敤div鏍囩鍒涘缓涓涓ā鍧楋紝骞惰缃ā鍧楃殑class灞炴т负mydiv锛屼富瑕佺敤浜庝笅闈㈤氳繃璇lass鏉ヨ缃甤ss鏍峰紡銆傝鐐瑰嚮杈撳叆鍥剧墖鎻忚堪 鍦╰est.html鏂囦欢鍐咃紝鍦╠iv鏍囩鍐咃紝浣跨敤img鏍囩...
绛旓細html涓庢牱璁╂彃鍏ョ殑鍥剧墖灞呬腑锛熺涓绉嶆柟娉曪細璁剧疆鐖跺厓绱犲唴鏂囧瓧灞呬腑鍗冲彲璁╁浘鐗囧眳涓銆俥lement{text-align:center;} 绗簩绉嶆柟娉曪細璁剧疆鍥剧墖涓哄潡绾у厓绱狅紝璁剧疆宸﹀彸margin涓篴uto鍗冲彲璁╁浘鐗囧眳涓俰mg{display:block;margin-left:auto;margin-right:auto;} 缃戦〉涓浣曠敤HTML/CSS瀹炵幇鏂囧瓧灞呬腑浜庡浘鐗囷紵1銆佸墠绔敤鍒扮殑缂栬緫...
绛旓細1銆侀鍏 鏂板缓a.html鏂囦欢锛屽苟鍑嗗涓寮犲皬鏍囷紝濡備笅锛2銆佷娇鐢ㄦ祻瑙堝櫒鎵撳紑a.html锛屽彲浠ョ湅鍒伴粯璁ゆ儏鍐碉紝鏄鍥剧墖缃《瀵归綈锛屾枃瀛楃疆搴曞榻愶紝鎵浠ラ氬父鍥剧墖楂橈紝鏂囧瓧浣庯紝涓嶈兘姘村钩灞呬腑瀵归綈锛屽涓嬶細3銆佸啀娆＄紪杈慳.html锛屽姞鍏ヤ互涓媍ss浠ｇ爜锛.hlong *{display:inline-block;vertical-align:middle}淇濆瓨 4銆佸啀娆′娇鐢ㄦ祻瑙堝櫒璁块棶...
绛旓細html涓娇鍥剧墖灞呬腑鐨勪唬鐮佹槸锛<img src="" alt="" align="center" /> 鎬庢牱璁﹉tml涓鐨刬mg鏍囩灞呬腑鏄剧ず锛1銆侀鍏堟垜浠渶瑕佹墦寮鐢佃剳锛屾壘鍒癉W杞欢鐨勫揩鎹烽敭锛屽弻鍑绘墦寮涔嬪悗锛屾柊寤轰竴涓猦tml椤甸潰銆2銆佺劧鍚庢垜浠細杩涘叆鍒癉W鐨凥TML椤甸潰鐨勭紪杈戦〉闈紝鎴戜滑闇瑕佸皢鏂板缓鐨刪tml椤甸潰杩涜涓涓繚瀛樸3銆佸皢缃戦〉淇濆瓨濂戒箣鍚庯紝鎴戜滑...
