怎么用DIV+CSS控制图片居中的问题
水平居中：1、单独文字垂直居中我们只需要设置CSS样式line-height属性即可。
2、文字与图片同排，在设置div高度同时再对此css样式的图片“img”样式设置vertical-align:middle垂直居中属性
，
如.yangshi
img{vertical-align:middle;}
。
垂直居中：
1．对这个CSS居中问题，我们可以使用设置背景图片的方法
。举例：
body
{BACKGROUND:
url(”图片文件”)
#FFF
no-repeat
center;}
关键就在于这个Center属性，它表示让该背景图片在容器中居中。你也可以把Cener换成Top
Left或者直接写上数字来调整它的位置。
2．如何使文本在DIV中垂直居中
对于文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，示范代码如下：
#center{
MARGIN-RIGHT:
auto;
MARGIN-LEFT:
auto;
height:200px;
vertical-align:middle;
line-height:200px;
}
<div
id=”center”><p>test
content</p></div>
参考资料：
css如何让图片居中
http://www.studyofnet.com/news/188.html
绛旓細鐒跺悗璁剧疆margin锛歛uto灏变細鑷姩鍨傜洿灞呬腑浠ｇ爜濡備笅div{width:200px;height:200px;border: 1px solid #ccc;position: relative;//鐖跺厓绱犺缃粷瀵瑰畾浣峿img{ position: absolute;//鐩稿瀹氫綅width:80px;
绛旓細1銆傛墦寮涓涓湪绾垮啓鍓嶇浠ｇ爜鐨勭綉绔欙紝姣斿jsrun鎴栬卝sfiddle銆2.鐩爣鏄埗浣滀竴寮犱笉鍚屽ぇ灏忕殑鍥剧墖锛屾晥鏋滃鍥銆3.姣忎釜妗嗙殑html濡備笅锛宨mg src=鍥剧墖鍦板潃>/img> 4.css濡備笅锛屽叾涓渶瑕佹敞鎰忕殑鏄紝涓嶈缃渶澶栧眰div鐨勫ぇ灏忥紝鍙缃畇pan鐨勫ぇ灏忥紝璁﹕pan鐨勫ぇ灏忓喅瀹歞iv鐨勫ぇ灏忋傚湪?涔嬩腑 鏄剧ず:琛ㄦ牸鍗曞厓锛涙枃鏈榻:灞呬腑锛...
绛旓細褰鍥剧墖澶т簬p鏃讹紝鎯宠鍥剧墖灞呬腑鏄剧ず锛屽鏋滃浘鐗囩瓑姣斾緥缂╁皬鍙兘浼氬鑷村浘鐗囦笉鑳藉～鍏呮暣涓猵锛屽鏋滅洿鎺ュ皢鍥剧墖涓嶈缃楂橈紝灏嗗叾澶栧眰p璁剧疆overflow:hidden锛涜繖鏃跺嵆浣垮灞俻璁剧疆浜嗘按骞冲瀭鐩村眳涓紝鍥剧墖涔熶笉鏄眳涓殑鏁堟灉锛氳В鍐虫柟娉曪細1- 鎶婂浘鐗囪缃负鑳屾櫙鍥剧墖<div class="face-img-contain" id="face-img-back"> </div...
绛旓細鍒╃敤鍥剧墖鐨刴argin灞炴у皢鍥剧墖姘村钩灞呬腑锛屽埄鐢―IV鐨刾adding灞炴у皢鍥剧墖鍨傜洿灞呬腑銆傜粨鏋勪唬鐮佸悓涓婏紱CSS浠ｇ爜濡備笅锛歞iv {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;} img {display:block; margin:0 auto;} 澶囨敞锛欼mg鏄唴鑱斿厓绱狅紝瑕佽缃叾margin灞炴т娇鍏跺眳涓...
绛旓細1銆佸崟鐙枃瀛楀瀭鐩村眳涓垜浠彧闇瑕佽缃瓹SS鏍峰紡line-height灞炴у嵆鍙銆2銆佹枃瀛椾笌鍥剧墖鍚屾帓锛屽湪璁剧疆div楂樺害鍚屾椂鍐嶅姝ss鏍峰紡鐨勫浘鐗団渋mg鈥濇牱寮忚缃畍ertical-align:middle鍨傜洿灞呬腑灞炴 锛屽.yangshi img{vertical-align:middle;} 銆傚瀭鐩村眳涓細1锛庡杩欎釜CSS灞呬腑闂锛屾垜浠彲浠ヤ娇鐢ㄨ缃儗鏅浘鐗囩殑鏂规硶 銆備妇渚嬶細body {...
绛旓細01鎵撳紑璁颁簨鏈垨鍏朵粬浠ｇ爜缂栬緫鍣紝鍒涘缓涓涓柊鐨凥TML鏂囦欢锛屽涓嬪浘鎵绀 02鐢ㄦ祻瑙堝櫒鎵撳紑杩欎釜HTML鏂囦欢锛屽彲浠ョ湅鍒颁笅鍥炬墍绀虹殑鏁堟灉銆傝繖骞呯敾鍦ㄦ暣椤电殑宸﹁竟銆03鍥剧墖灞呬腑鍙互閫氳繃HTML涓殑align灞炴ф潵鎺у埗銆傚湪鍥剧墖鐨div涓坊鍔燼lign="center"銆04鍦ㄦ祻瑙堝櫒涓啀娆℃墦寮杩欎釜椤甸潰鏂囦欢锛屾晥鏋滃涓嬨傚浘鐗囧凡缁忔樉绀哄湪涓棿銆05鎴戜滑杩...
绛旓細1銆佽В鍐虫按骞冲眳涓殑鍔炴硶锛氬鏋鍥剧墖宸︽诞鍔ㄥ苟涓"display:inline"鏃讹紝鍙缁欏浘鐗囪缃竴涓"text-align:center"灞炴э紝灏遍『鍒╄В鍐充簡姘村钩灞呬腑銆2銆佽В鍐冲瀭鐩村眳涓殑鍔炴硶锛氫娇鐢╠isplay:table-cell鍜岃缃簡display:inline-block鐨勭嚎鍚坰pan銆傚畬鏁翠緥瀛愶細html浠ｇ爜锛<ul class="imgWrap clearfix"><li><a href="#" ...
绛旓細v=31680756.gif"></div></body></html>绀轰緥涓仛浜嗕竴涓涓300px锛岄珮涓260px鍍忕礌鐨勫鍣紝鍏朵腑鍥剧墖閫氳繃缁濆瀹氫綅锛屾帶鍒跺叾浣嶄簬瀹瑰櫒鐨勬按骞冲眳涓紝瀹瑰櫒搴曢儴鐨勪綅缃俠ottom:10px;鎺у埗鍥剧墖璺濈搴曢儴10px锛宭eft:50%銆乵argin-left:-60px;鎺у埗鍥剧墖姘村钩灞呬腑銆傚叾涓殑margin-left鐨勫兼牴鎹浘鐗囧搴﹀彉鍖栵紝涓鸿礋鐨勪簩鍒...
绛旓細1銆佹柊寤篽tml鏂囨。锛屽湪body鏍囩涓坊鍔div鏍囩锛岀劧鍚庡湪div鏍囩涓坊鍔爄mg鏍囩锛2銆佷负div鏍囩娣诲姞鈥渕argin鈥濆睘鎬э紝灞炴у兼槸鈥0 auto鈥濓紝杩欐椂div鏍囩灏嗕細鍦ㄧ綉椤典腑灞呬腑鏄剧ず锛3銆佷负div鏍囩娣诲姞鈥渢ext-align鈥濆睘鎬э紝灞炴у兼槸鈥渃enter鈥濓紝杩欐椂div鏍囩鍐呯殑img鏍囩灏嗕細鍦╠iv鏍囩涓眳涓樉绀猴紝杩欐牱鍥剧墖灏变細鍦ㄧ綉椤典腑灞呬腑...
绛旓細1銆佹墦寮鍦ㄧ嚎鍐欏墠绔唬鐮佺殑缃戠珯濡俲srun鎴栬卝sfiddle銆傜洰2銆佹爣鏄仛涓涓鍥炬墍绀虹殑鏁堟灉锛屼笉鍚屽ぇ灏忕殑鍥剧墖銆3銆佹瘡涓柟妗嗙殑html 濡備笅锛<div> <span> <img src='鍥剧墖鍦板潃'> </img> </span> </div> 4銆css濡備笅锛屽叾涓渶瑕佹敞鎰忕殑鏄紝涓嶈璁剧疆鏈澶栧眰div鐨勫ぇ灏忥紝鍙缃畇pan鐨勫ぇ灏忥紝璁﹕pan鐨勫ぇ灏忓喅瀹歞iv鐨...
