html中，把图片放在css盒子里，图片下方的文字描述一行的字数还没有满 在CSS和HTML中,怎样把文字放在图片下面。如图效果：
\u6c42\u6559HTML+CSS\u5e03\u5c40\u95ee\u9898\uff0c\u6587\u5b57\u56fe\u7247\u5728\u4e00\u884c\u6587\u5b57\u56fe\u7247
\u5728\u6574\u4e2a\u5916\u5c42\u5bbd\u5ea6\u8db3\u591f\u5927\u7684\u60c5\u51b5\u4e0b\uff0c\u6587\u5b57\u4e0e\u56fe\u7247\u5c31\u662f\u4f1a\u5728\u4e00\u884c\uff0c\u82e5\u662f\u548c\u6587\u5b57\u4e00\u6837\u5927\u7684\u56fe\u7247\uff0c\u90a3\u57fa\u672c\u4e0a\u4e5f\u662f\u770b\u4e0d\u51fa\u662f\u4ec0\u4e48\uff0c\u5b83\u5e94\u8be5\u662f\u56fe\u6807\uff0c\u800c\u4e0d\u662f\u56fe\u7247\u3002
\u7f29\u5c0f\u56fe\u7247\u7684\u65b9\u6cd5\u5c31\u662f\u7ed9\u56fe\u7247\u6dfb\u52a0\u5bbd\u5ea6\u4e0e\u9ad8\u5ea6\uff0c\u628a\u8fd9\u4e9b\u5199\u5728\u6837\u5f0f\u8868\u7684\u6587\u4ef6\u4e2d\u3002\u5e76\u4e0d\u662f\u5b83\u4eec\u7684\u6570\u5b57\u662f\u4e00\u6837\u7684\uff0c\u5927\u5c0f\u5c31\u4f1a\u76f8\u540c\uff0c\u8981\u4e0d\u65ad\u7684\u8c03\u6574\u3002
dl{width:200px;float:left;margin:0;padding:0;}
dl dd{width:200px;margin:0;text-align:center;padding-bottom:10px;}
dl dd img{height:180px;width:180px;}
dl dt{height:25px;line-height:25px;text-align:center;width:100%;}
\u6807\u9898
\u63cf\u8ff0
\u6807\u9898
\u63cf\u8ff0
<div class="box">
<img src="6107.jpg">
这里是居中的文字
</div>
<style>
.box{width:300px; text-align:center; font-szie:18px;}
.box img {width:100%;}
</style>
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸叾娆★紝鍦╥ndex.html涓鐨<style>鏍囩涓紝杈撳叆css浠ｇ爜锛歞iv{border: 1px solid blue; text-align: center}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃鍥剧墖鍦鐩掑瓙涓槸灞呬腑鏄剧ず鐨勩
绛旓細姣旇緝绠鍗曠殑鍋氭硶灏辨槸锛屽皢浠栦滑鏀剧疆涓涓鐩掑瓙鍐咃紝浣犳兂璁╂枃瀛楄窡鍥剧墖灞呬腑锛岄偅涔堜笉涓瀹氳璁╁浘鐗囧綋鏂囧瓧鐨勫弬鐓х墿锛岃屾槸璁╀粬浠湪澶х洅瀛愬唴灞呬腑锛屼笉闇瑕佸お澶嶆潅鐨勬鏋剁粨鏋勶紝鍙渶瑕佸埄鐢ㄦ牱寮忕殑灞炴у嵆鍙紝骞朵笖鍚勪釜娴忚鍣ㄩ兘浼氭甯告樉绀猴紝浠ｇ爜濡備笅锛<div class="box"> <img src="6107.jpg"> 杩欓噷鏄眳涓殑鏂囧瓧 </div> <...
绛旓細1. 鍦HTML涓紝鍏堝垱寤轰竴涓鐩掑瓙锛岀敤浜庢樉绀鍥剧墖銆傚彲浠ヤ娇鐢╠iv鏍囩鍒涘缓涓涓鍣紝骞惰缃搴︺侀珮搴︺乷verflow:hidden灞炴э紝浠ヤ究闄愬埗鍥剧墖鐨勬樉绀鸿寖鍥淬2. 鍦ㄥ鍣ㄥ唴閮ㄥ垱寤轰竴涓猽l鏍囩锛岀敤浜庡瓨鏀炬墍鏈夌殑鍥剧墖銆傛瘡涓寮犲浘鐗囬兘闇瑕佷娇鐢╨i鏍囩鏉ュ寘瑁癸紝骞惰缃甪loat:left灞炴э紝浣垮叾鑳藉鎺掑垪鍦ㄤ竴琛屻3. 鍦CSS涓紝璁剧疆鍥剧墖鐨...
绛旓細1銆佹墦寮HBuilder寮鍙戣蒋浠跺苟鍦╓eb椤圭洰涓垱寤轰竴涓柊鐨勯潤鎬侀〉闈2銆灏涓変釜div鍏冪礌鎻掑叆body鍏冪礌骞跺皢鍏剁被璁剧疆涓篈A锛孊B鍜孋C銆3銆侀瑙堥潤鎬侀〉闈紝鎮ㄥ彲浠ョ湅鍒伴〉闈㈡晥鏋滐紝鍗充腑涓婂眰鍜屼笅灞傘4銆佸垎鍒缃瓵A锛孊B鍜孋C涓変釜绫荤殑鏍峰紡灞炴э紝鍖呮嫭瀹藉害锛岄珮搴﹀拰鑳屾櫙棰滆壊銆5銆佹垜浠啀娆¤缃産ody鍏冪礌鏍峰紡灞炴с俠ody{ text-align:...
绛旓細background: url("鍥剧墖璺緞")
绛旓細html鎻掑叆鍥剧墖鏈変袱绉嶆柟寮忥細涓绉嶆槸閫氳繃<img>鏍囩鎻掑叆鐨勬甯哥殑鍥剧墖锛鍙︿竴绉嶆槸閫氳繃css鏍峰紡鎻掑叆鐨勮儗鏅浘鐗囥傞棶棰樺垎鏋愶細1銆侀鍏堜綘鏄氳繃绗簩绉嶆柟寮忔彃鍏ョ殑鏄儗鏅浘鐗囷紝鐩存帴鐢╳idth鍜宧eight鍙兘鎺у埗div鐨勫搴﹀拰楂樺害銆2銆佸鏋滀綘鎻掑叆鐨勫浘鐗囨槸閫氳繃<img>鏍囩鐨勬柟寮忔潵鎻掑叆鐨勮瘽锛屽彲浠ラ氳繃<img>鑷韩鐨勫睘鎬ф帶鍒跺浘鐗囧ぇ灏忥紝...
绛旓細height:300px; overflow:hidden; }</style><div id="imgDiv"></div> 杩欐浠ｇ爜浣犺瘯璇曠湅锛屽湪div涓畬鍏ㄦ病鏈夋坊鍔鍥剧墖鏍囩锛岃屾槸鏍规嵁css涓殑background灞炴х粰div娣诲姞涓寮犲浘鐗囦綔涓鸿儗鏅傝繖鏍峰仛鐨勫ソ澶勬槸鍏佽鍦ㄥ悓涓涓猟iv涓敤hover鏉ュ疄鐜板浘鐗囩殑榧犳爣鍝嶅簲鍒囨崲锛屽潖澶勫氨鏄棤娉曡皟鏁村浘鐗囩殑澶у皬銆
绛旓細A1.鍐欏湪css閲岄潰鐨鍥剧墖鏄互鑳屾櫙鍥惧舰寮忓瓨鍦ㄧ殑锛岃屽啓鍦html閲鐨勬槸浠<img>鏍囩褰㈠紡瀛樺湪鐨勶紝鍦ㄧ綉椤靛姞杞界殑杩囩▼涓紝浠ss鑳屾櫙鍥惧瓨鍦ㄧ殑鍥剧墖浼氱瓑鍒扮粨鏋勫姞杞藉畬鎴愶紙缃戦〉鐨勫唴瀹瑰叏閮ㄦ樉绀轰互鍚庯級鎵嶅紑濮嬪姞杞斤紝鑰html涓鐨<img>鏍囩鏄綉椤电粨鏋勶紙鍐呭锛夌殑涓閮ㄥ垎浼氬湪鍔犺浇缁撴瀯鐨勮繃绋嬩腑鍔犺浇锛屾崲鍙ヨ瘽璁诧紝缃戦〉浼氬厛鍔犺浇<img>...
绛旓細鍦╟ss鏍峰紡閲屽姞灏卞彧鑳芥槸鍔犺儗鏅鍥,css浠ｇ爜涓:background:url(鍦板潃) repeat 0px 2px;鍦╱rl鐨勬嫭鍙烽噷濉笂鍥剧墖鐨勫湴鍧,repeat涓哄惊鐜,濡備笉寰幆鍒欎负no-repeat,鍚庨潰鐨0px 2px鍙槸璋冩暣鍥剧墖鐨勪綅缃︹ 鏈洖绛旂敱鎻愰棶鑰呮帹鑽 涓炬姤| 绛旀绾犻敊 | 璇勮 6 6 宸﹁崇帇浠 閲囩撼鐜:32% 鎿呴暱: 甯歌杞欢 C#/.NET C/C++ 鏁版嵁搴...
绛旓細鍙互浣跨敤<img> 鏍囩锛屼笅闈㈡紨绀轰竴涓嬶細1銆佸噯澶囦竴涓html鏂囦欢鍜屼竴寮鍥剧墖锛骞鏀惧湪鍚屼竴涓枃浠跺す閲岄潰 2銆佹墦寮html鏂囦欢锛屾寜涓嬪浘涓孩鑹叉閫夊嚭鏉ョ殑浣嶇疆鍦╞ody鏍囩閲岄潰杈撳叆<img src="./test.jpg" alt="娴嬭瘯" />锛岀劧鍚庝繚瀛樸./浠ｈ〃浠ｈ〃褰撳墠鐩綍 3銆佸湪娴忚鍣ㄤ腑鎵撳紑html鏂囦欢锛屽氨鍙互鏄剧ず鎻掑叆鐨勫浘鐗囦簡锛屽涓嬪浘...
