CSS中怎么让图片在盒子里居中呢？ 怎样用css只让div中的图片居中？
css\u600e\u4e48\u5c06\u56fe\u7247\u5728DIV\u91cc\u5c45\u4e2d\u554a?\u7ed3\u6784\uff1a
\u6837\u5f0f\uff1a
.tb-p-c{
display: table-cell;
vertical-align:middle;
width:140px;
height:140px;
text-align:center;
*display: block;
*font-size: 122px;
background:red;
}
.tb-p-c img {
vertical-align:middle;
}
\u8fd9\u6bb5\u4ee3\u7801\u53ef\u4ee5\u5e2e\u52a9\u4f60\u5c45\u4e2d\uff0c\u4e0d\u8fc7\u6709\u7455\u75b5\uff0c\u5c31\u662f\u5f53\u56fe\u7247\u8fc7\u5927\u7684\u65f6\u5019\u5728\u706b\u72d0\u91cc\u4e0d\u4f1a\u526a\u5207\u56fe\u7247\uff0c\u6240\u4ee5\u8981\u63a7\u5236\u56fe\u7247\u7684\u9ad8\u5bbd<=\u5bb9\u5668\u7684\u9ad8\u5bbd
1\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
可以为盒子添加“text-align: center;”样式使图片在盒子中居中。
1、新建html文档，在body标签中添加一个div盒子，然后在这个div盒子中添加一张图片：
2、为div盒子和图片添加一些样式，这时默认情况下图片会向盒子的左上角对齐：
3、为div盒子添加“text-align: center;”样式，这时图片会在div盒子中居中对齐：
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、其次，在index.html中的<style>标签中，输入css代码：div{border: 1px solid blue; text-align: center}。
3、浏览器运行index.html页面，此时图片在盒子中是居中显示的。
<div style="width: 500px; height: 200px; border: solid 1px red; text-align: center">
<img src="http://www.baidu.com/img/baidu_jgylogo3.gif" />
</div>
<div style="width: 500px; height: 200px; border: solid 1px red;">
<center>
<img src="http://www.baidu.com/img/baidu_jgylogo3.gif" />
</center>
</div>
<table style="width: 500px; height: 200px; border: solid 1px red; text-align:center">
<tr>
<td>
<img src="http://www.baidu.com/img/baidu_jgylogo3.gif" />
</td>
</tr>
</table>
最简单的居中text-align: center。
使用center标签也可设置居中。
有时候做居中也会用到margin: 0px auto。
div下做到了水平居中，垂直比较困难。
放到table里面，可以水平居中，垂直居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片居中</title>
<style>
div{
width:600px;
height:600px;
border:1px solid red;
text-align: center;
}
span{
height: 100%;
display: inline-block;
vertical-align: middle;
}
img{
width:300px;
height: 300px;
vertical-align: middle;
}
</style>
</head>
<body>
<div><span></span><img src="1.jpg" alt=""></div>
</body>
</html>
显示效果单行
.sidebar2 span{ text-align:center;}
多行用div
.sidebar2 { text-align:center;}
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸叾娆★紝鍦╥ndex.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歞iv{border: 1px solid blue; text-align: center}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃鍥剧墖鍦ㄧ洅瀛愪腑鏄灞呬腑鏄剧ず鐨勩
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸叾娆★紝鍦╥ndex.html涓殑style>鏍囩涓紝杈撳叆css浠ｇ爜锛歱{border:1pxsolidblue;text-align:center}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃鍥剧墖鍦ㄧ洅瀛愪腑鏄灞呬腑鏄剧ず鐨勩
绛旓細css鐩掑瓙鎬庝箞璁捐灞呬腑鎺掔増銆1銆侀鍏堝皢鐩掑瓙璁捐濂斤紝鐒跺悗閫氳繃鍥剧墖灏嗚鐩掑瓙璁捐涓哄浘鍍(涓棿鏈変竴鏉＄孩鑹茬殑妯嚎) 銆(鍦ㄦ鎴戜滑灏变笉灞曠ず鍥剧墖浜) 2銆佽璁″ソ鐩掑瓙涔嬪悗锛屾垜浠啀閫変腑鍥惧儚(鐭╁舰) 銆傝皟鑺傝嚦閫傚悎鐩掑瓙涓婇潰锛岃皟鑺傚ソ璺濈璁╁浘鐗涓庣洅瀛愬崗璋冦(鐭╁舰宸ュ叿璋冭妭涓涓嬭窛绂昏鐩掑瓙鍗忚皟) 3銆佹渶鍚庯紝鍦ㄧ洅瀛鐨勪笂闈㈡斁涓や釜鎻掑瓟...
绛旓細鍙互涓虹洅瀛愭坊鍔犫渢ext-align: center;鈥濇牱寮忎娇鍥剧墖鍦ㄧ洅瀛愪腑灞呬腑銆1銆佹柊寤篽tml鏂囨。锛屽湪body鏍囩涓坊鍔犱竴涓猟iv鐩掑瓙锛岀劧鍚庡湪杩欎釜div鐩掑瓙涓坊鍔犱竴寮犲浘鐗囷細2銆佷负div鐩掑瓙鍜屽浘鐗囨坊鍔犱竴浜涙牱寮忥紝杩欐椂榛樿鎯呭喌涓嬪浘鐗囦細鍚戠洅瀛愮殑宸︿笂瑙掑榻愶細3銆佷负div鐩掑瓙娣诲姞鈥渢ext-align: center;鈥濇牱寮忥紝杩欐椂鍥剧墖浼氬湪div鐩掑瓙涓眳涓...
绛旓細涓銆佷紶缁烪TML璁╁浘鐗囨í鍚戞按骞冲眳涓柟娉 鐩存帴鍦ㄦ爣绛惧璞″唴鍔犫渁lign="center"鈥濆嵆鍙瀵硅薄鍐呭浘鐗囨í鍚戞按骞冲眳涓樉绀銆俛lign="center"浣跨敤鏂规硶锛歱align="center">/p> /p>?/body>?/html>?2銆佹按骞冲眳涓疄渚 HTMLCSS涓浣曞疄鐜癉IV涓殑鍥剧墖姘村钩鍨傜洿灞呬腑瀵归綈锛熷鏋滃浘鐗囧乏娴姩骞朵笖"display:inline"鏃讹紝鍙缁欏浘鐗...
绛旓細CSS涓庝箞璁╁浘鐗囧湪鐩掑瓙閲屽眳涓鍛紵闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸叾娆★紝鍦╥ndex.html涓殑style>鏍囩涓紝杈撳叆css浠ｇ爜锛歱{border:1pxsolidblue;text-align:center}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃跺浘鐗囧湪鐩掑瓙涓槸灞呬腑...
绛旓細css閲岄潰鎬庝箞璁涓涓狣IV灞呬腑锛熺涓绉嶆柟寮忥細璁剧疆body灞呬腑銆傚湪CSS涓殑浠ｇ爜鏄紙body{text-align:center;}锛夌浜岀鏂瑰紡锛氱敤鐩掑瓙妯″瀷锛岄鍏堣缃竴涓狣iv锛岃繖涓狣IV鐨勫搴︿负100%锛岀劧鍚庡湪杩欎釜DIV灞呬腑锛岄偅涔堝湪杩欎釜DIV涓姞鐨勫唴瀹瑰氨灞呬腑鏄剧ず锛屼唬鐮佸涓嬶細p>p>/p>/p>CSS鏍峰紡浠ｇ爜锛歴tyletype="text/css">.p1{text-...
绛旓細1銆佹墦寮鍦ㄧ嚎鍐欏墠绔唬鐮佺殑缃戠珯濡俲srun鎴栬卝sfiddle銆傜洰2銆佹爣鏄仛涓涓鍥炬墍绀虹殑鏁堟灉锛屼笉鍚屽ぇ灏鐨勫浘鐗銆3銆佹瘡涓柟妗嗙殑html 濡備笅锛 4銆css濡備笅锛屽叾涓渶瑕佹敞鎰忕殑鏄紝涓嶈璁剧疆鏈澶栧眰div鐨勫ぇ灏忥紝鍙缃畇pan鐨勫ぇ灏忥紝璁﹕pan鐨勫ぇ灏忓喅瀹歞iv鐨勫ぇ灏忋傚叾涓 display: table-cell;text-align: center;vertical-...
绛旓細css鐩掑瓙鍐呭灞呬腑鐨鏂规硶锛歝ss鐩掑瓙鍐呭姘村钩灞呬腑鐨則ext-align:center 锛涙垨 margin:0 auto锛涗唬鐮侊細鏁堟灉锛氬瀭鐩村眳涓殑line-height锛涗唬鐮侊細鏁堟灉:缁濆瀹氫綅姘村钩鍨傜洿灞呬腑锛宲osition:absolute;top:50%;left:50%;浠ｇ爜锛氭晥鏋滐細
绛旓細text-align:center 鍐欎笂杩欎釜灞炴
