爱学记
css娴�鍔ㄥ眳涓� css鎬庝箞瀹炵幇float:left;灞呬腑锛�
css鎬庝箞瀹炵幇float:left;灞呬腑锛熉犅�
css鎬庝箞瀹炵幇float:left;灞呬腑锛�
CSS鏈塮loat:left鍜宖loat:right锛屼絾鑳藉惁瀹炵幇float:center鍛�锛熸按骞冲眳涓�娴�鍔�锛屽綋鐒舵槸鍙�浠ョ殑锛岃繖閲屽皢浠嬬粛浣犲疄鐜版柟娉曘€備互涓嬮潰鐨凩i鍒楄〃涓轰緥锛屾垜浠�瑕佸疄鐜颁腑闂碙I鐨勫眳涓�娴�鍔�锛�
1 聽 聽<div聽id="macji">
2 聽 聽<ul聽class="macji-skin">
3 聽 聽<li>鍒楄〃涓€</li>
4 聽 聽<li>鍒楄〃浜�</li>
5 聽 聽<li>鍒楄〃涓�</li>
6 聽 聽</ul>
7 聽 聽</div>
鎴戜滑闇€瑕佸厛浜嗚В涓媝osition:relative灞炴€э紝瀹冩槸鎸噇eft銆乺ight銆併€乥ottom绛変腑鐨勫亸绉讳綅缃�銆傛垜浠�鍙�浠ヨ�﹗l涓簆osition:relative;left:50%锛屽啀璁﹍i鍚戝乏娴�鍔�锛屽啀璁﹑osition:relative;right:50%锛堟垨鑰卨eft:-50%锛夛紝閭ｄ箞li灏变細鍚戜腑闂存诞鍔ㄤ竴鏍峰眳涓�浜嗐€備笉鐩镐俊鐨勫彲鎶婁笅闈㈢殑CSS瀹氫箟缁撳悎涓婅竟鐨勭▼寮忕爜鎷疯礉鍒癏TML娴嬭瘯銆�
view source
01 聽 聽#macji{
02 聽 聽position:relative;
03 聽 聽width:100%;
04 聽 聽height:80px;
05 聽 聽background-color:#eee;
06 聽 聽text-align:center;
07 聽 聽overflow:hidden;
08 聽 聽}
09 聽 聽#macji .macji-skin{
10 聽 聽float:left;
11 聽 聽position:relative;
12 聽 聽left:50%;
13 聽 聽}
14 聽 聽#macji .macji-skin li{
15 聽 聽position:relative;
16 聽 聽right:50%;
17 聽 聽float:left;
18 聽 聽margin:10px;
19 聽 聽padding:0聽10px;
20 聽 聽border:solid聽1px聽#000;
21 聽 聽line-height:60px;
22 聽 聽}
铏界劧杩欐牱鐢ㄦ湁浜涢夯鐑︼紝浣嗗�逛簬涓€涓�浼樼�€鐨勫墠绔�璁捐�″笀锛岃繖涓�鎶€宸ц繕鏄�鏈夊繀瑕佹帉鎻＄殑鍝︺€�
css灞呬腑鎬庝箞瀹炵幇锛�
text-align:center
css鍥剧墖灞呬腑鎬庝箞瀹炵幇锛�
瀹炴垬甯�鎻愮ず鎮ㄨВ鍐虫按骞冲眳涓�鏄�鐩稿綋鐨勫�规槗锛屽�傛灉鍥剧墖宸︽诞鍔ㄥ苟涓�"display:inline"鏃讹紝鎴戜滑鍙�瑕佺粰鍥剧墖璁惧畾涓€涓�"text-align:center"灞炴€э紝灏遍『鍒╄В鍐充簡姘村钩灞呬腑銆�
瀵逛簬鍨傜洿灞呬腑鐨勬渶浣宠В鍐虫柟妗堬紝鍦ㄧ幇浠ｆ祻瑙堝櫒涓�锛屾垜浠�鍙�浠ョ粰鍥剧墖瀹瑰櫒璁惧畾鈥渄ipslay:table-cell;vertical-align:middle鈥�, 杩欑�嶆柟娉曡兘椤哄埄鐨勮�╁浘鐗囧疄鐜板瀭鐩村眳涓�
CSS鎬庝箞瀹炵幇鍨傜洿灞呬腑锛�
Hack鎶€鏈�灏卞彲浠ュ晩锛佹墍浠ュ湪杩欓噷鎴戣繕瑕佸泬鍡︿袱鍙ワ紝CSS涓�鐨勭‘鏄�鏈塿ertical-align灞炴€э紝浣嗘槸瀹冨彧瀵�(X)HTML鍏冪礌涓�鎷ユ湁valign鐗规€х殑鍏冪礌鎵嶇敓鏁堬紝渚嬪�傝〃鏍煎厓绱犱腑鐨�<td>銆�<th>銆�<caption>绛夛紝鑰屽儚<div>銆�<span>杩欐牱鐨勫厓绱犳槸娌℃湁valign鐗规€х殑锛屽洜姝や娇鐢╲ertical-align瀵瑰畠浠�涓嶈捣浣滅敤銆�
涓€銆佸崟琛屽瀭鐩村眳涓�
濡傛灉涓€涓�瀹瑰櫒涓�鍙�鏈変竴琛屾枃瀛楋紝瀵瑰畠瀹炵幇灞呬腑鐩稿�规瘮杈冪畝鍗曪紝鎴戜滑鍙�闇€瑕佽�惧畾瀹冪殑瀹為檯楂樺害height鍜屾墍鍦ㄨ�岀殑楂樺害line-height鐩哥瓑鍗冲彲銆�
濡傦細
div {
height:25px;
line-height:25px;
overflow:hidden;
}
杩欐�电▼寮忕爜寰堢畝锛屽悗闈�浣跨敤overflow:hidden鐨勮�惧畾鏄�涓轰簡闃叉�㈠唴瀹硅秴鍑哄�瑰櫒鎴栬€呬骇鐢熻嚜鍔ㄦ崲琛岋紝杩欐牱灏辫揪涓嶅埌鍨傜洿灞呬腑鏁堟灉浜嗐€傛洿澶欳SS鏁�
绋嬨€�
<!DOCTYPE PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" ":w3./TR/x1/DTD/x1-transitional.dtd">
< xmlns=":w3./1999/x">
<head>
<title> 鍗曡�屾枃瀛楀疄鐜板瀭鐩村眳涓� </title>
<meta -equiv="Content-Type" content="text/; charset=utf-8" />
<style type=text/css>
body { font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<div>鐜板湪鎴戜滑瑕佷娇杩欐�垫枃瀛楀瀭鐩村眳涓�鏄剧ず锛�</div>
</body>
</>
浜屻€佸�氳�屾湭鐭ラ珮搴︽枃瀛楃殑鍨傜洿灞呬腑
濡傛灉涓€娈靛唴瀹癸紝瀹冪殑楂樺害鏄�鍙�鍙樼殑閭ｄ箞鎴戜滑灏卞彲浠ヤ娇鐢ㄤ笂涓€鑺傝�插埌鐨勫疄鐜版按骞冲眳涓�鏃朵娇鐢ㄥ埌鐨勬渶鍚庝竴绉嶆柟娉曪紝灏辨槸璁惧畾Padding锛屼娇涓婁笅鐨�
padding鍊肩浉鍚屽嵆鍙�銆傚悓鏍风殑锛岃繖涔熸槸涓€绉嶁€滅湅璧锋潵鈥濈殑鍨傜洿灞呬腑鏂瑰紡锛屽畠鍙�涓嶈繃鏄�浣挎枃瀛楁妸<div>瀹屽叏濉�鍏呯殑涓€绉嶈�挎眰鑰屽凡銆傚彲浠ヤ娇鐢ㄧ被浼间笅
闈㈢殑绋嬪紡鐮侊細
div {
padding:25px;
}
杩欑�嶆柟娉曠殑浼樼偣灏辨槸瀹冨彲浠ュ湪浠讳綍娴忚�堝櫒涓婃墽琛岋紝骞朵笖绋嬪紡鐮佸緢绠€鍗曪紝鍙�涓嶈繃杩欑�嶆柟娉曞簲鐢ㄧ殑鍓嶆彁灏辨槸瀹瑰櫒鐨勯珮搴﹀繀椤绘槸鍙�浼哥缉鐨勩€�
<!DOCTYPE PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" ":w3./TR/x1/DTD/x1-transitional.dtd">
< xmlns=":w3./1999/x">
<head>
<title> 澶氳�屾枃瀛楀疄鐜板瀭鐩村眳涓� </title>
<meta -equiv="Content-Type" content="text/; charset=utf-8" />
<style type=text/css>
body { font-size:12px;font-family:tahoma;}
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div><pre>鐜板湪鎴戜滑瑕佷娇杩欐�垫枃瀛楀瀭鐩村眳涓�鏄剧ず锛�
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</pre></div>
</body>
</>
涓夈€佸�氳�屾枃瀛楀浐瀹氶珮搴︾殑灞呬腑
鍦ㄦ湰鏂囩殑涓€寮€濮嬶紝鎴戜滑宸茬粡璇磋繃CSS涓�鐨剉ertical-align灞炴€у彧浼氬�规嫢鏈塿align鐗规€х殑(X)HTML鏍囩�捐捣浣滅敤锛屼絾鏄�鍦–SS涓�杩樻湁涓€涓猟isplay
灞炴晥鑳藉�熸ā鎷�<table>锛屾墍浠ユ垜浠�鍙�浠ヤ娇鐢ㄨ繖涓�灞炴€ф潵璁�<div>妯℃嫙<table>灏卞彲浠ヤ娇鐢╲ertical-align浜嗐€傛敞鎰忥紝display:table鍜�
display:table-cell鐨勪娇鐢ㄦ柟娉曪紝鍓嶈€呭繀椤昏�惧畾鍦ㄧ埗鍏冪礌涓婏紝鍚庤€呭繀椤昏�惧畾鍦ㄥ瓙鍏冪礌涓婏紝鍥犳�ゆ垜浠�瑕佷负闇€瑕佸畾浣嶇殑鏂囧瓧鍐嶅�炲姞涓€涓�<div>鍏冪礌锛�
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
<!DOCTYPE PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" ":w3./TR/x1/DTD/x1-transitional.dtd">
< xmlns=":w3./1999/x">
<head>
<title> 澶氳�屾枃瀛楀疄鐜板瀭鐩村眳涓� </title>
<meta -equiv="Content-Type" content="text/; charset=utf-8" />
<style type=text/css>
body { font-size:12px;font-family:tahoma;}
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content"><pre>鐜板湪鎴戜滑瑕佷娇杩欐�垫枃瀛楀瀭鐩村眳涓�鏄剧ず锛� Webjx.Com
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</pre></div>
</div>
</body>
</>
杩欎釜鏂规硶搴旇�ユ槸寰堢悊鎯充簡锛屼絾鏄�涓嶅垢鐨勬槸Inter Explorer 6 骞朵笉鑳芥�ｇ‘鍦扮悊瑙�display:table鍜宒isplay:table-cell锛屽洜姝よ繖绉嶆柟娉曞湪
Inter Explorer 6鍙婁互涓嬬殑鐗堟湰涓�鏄�鏃犳晥鐨勩€傚棷锛岃繖璁╀汉寰堥儊闂凤紒涓嶈繃鎴戜滑杩樺叾瀹冪殑鍔炴硶
鍥涖€佸湪Inter Explorer涓�鐨勮В鍐虫柟妗�
鍦↖nter Explorer 6鍙婁互涓嬬増鏈�涓�锛屽湪楂樺害鐨勮�＄畻涓婂瓨鍦ㄧ潃缂洪櫡鐨勩€傚湪Inter Explorer 6涓�瀵圭埗鍏冪礌杩涜�屽畾浣嶅悗锛屽�傛灉鍐嶅�瑰瓙鍏冪礌
杩涜�岀櫨鍒嗘瘮璁＄畻鏃讹紝璁＄畻鐨勫熀纭€浼间箮鏄�鏈夌户鎵挎€х殑锛堝�傛灉瀹氫綅鐨勬暟鍊兼槸缁濆�规暟鍊兼病鏈夎繖涓�闂�棰橈紝浣嗘槸浣跨敤鐧惧垎姣旇�＄畻鐨勫熀纭€灏嗕笉鍐嶆槸璇ュ厓绱犵殑
楂樺害锛岃€屼粠鐖跺厓绱犵户鎵挎潵鐨勫畾浣嶉珮搴︼級銆備緥濡傦紝鎴戜滑鏈変笅闈㈣繖鏍蜂竴涓�(X)HTML绋嬪紡鐮佹�碉細
<div id="wrap">
<div id="subwrap">
<div id="content">
</div>
</div>
</div>
濡傛灉鎴戜滑瀵箂ubwrap杩涜�屼簡缁濆�瑰畾浣嶏紝閭ｄ箞content涔熶細缁ф壙浜嗚繖涓�杩欎釜灞炴€э紝铏界劧瀹冧笉浼氬湪椤甸潰涓�椹�涓婃樉绀哄嚭鏉ワ紝浣嗘槸濡傛灉鍐嶅�筩ontent杩�
琛岀浉瀵瑰畾浣嶇殑鏃跺€欙紝浣犱娇鐢ㄧ殑100%鍒嗘瘮灏嗕笉鍐嶆槸content鍘熸湁鐨勯珮搴︺€備緥濡傦紝鎴戜滑璁惧畾浜唖ubwrap鐨刾osition涓�40%锛屾垜浠�濡傛灉鎯充娇content鐨勪笂
杈圭紭鍜寃rap閲嶅悎鐨勮瘽灏卞繀椤昏�惧畾:-80%;閭ｄ箞锛屽�傛灉鎴戜滑璁惧畾subwrap鐨�:50%鐨勮瘽锛屾垜浠�蹇呴』浣跨敤100%鎵嶈兘浣縞ontent鍥炲埌鍘熸潵鐨勪綅缃�涓婂幓
锛屼絾鏄�濡傛灉鎴戜滑鎶奵ontent涔熻�惧畾50%鍛�锛熼偅涔堝畠灏辨�ｅソ鍨傜洿灞呬腑浜嗐€傛墍浠ユ垜浠�鍙�浠ヤ娇鐢ㄨ繖涓�鏂规硶鏉ュ疄鐜癐nter Explorer 6涓�鐨勫瀭鐩村眳涓�锛�
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
:50%;
}
div#content {
border:1px solid #000;
position:relative;
:-50%;
}
褰撶劧锛岃繖娈电▼寮忕爜鍙�鑳藉湪Inter Exlporer 6绛夎�＄畻瀛樺湪闂�棰樼殑娴忚�堝櫒涓�鎵嶄細鏈変綔鐢ㄣ€傦紙涓嶈繃鎴戜笉瑙ｏ紝鎴戞煡闃呬簡寰堝�氭枃绔狅紝涓嶇煡閬撴槸鍥犱负鍑�
澶勭浉鍚岃繕鏄�浠€涔堝師鍥狅紝浼间箮寰堝�氫汉閮戒笉鎰挎剰鍘昏В閲奍nter Exlporer 6涓�杩欒繖涓狟ug鐨勫師鐞嗭紝鎴戜篃鍙�鏄�浜嗚В浜嗕竴鐐圭毊姣涳紝杩樿�佸啀鐮旂┒锛�
<!DOCTYPE PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" ":w3./TR/x1/DTD/x1-transitional.dtd">
< xmlns=":w3./1999/x">
<head>
<title> 澶氳�屾枃瀛楀疄鐜板瀭鐩村眳涓� </title>
<meta -equiv="Content-Type" content="text/; charset=utf-8" />
<style type=text/css>
body { font-size:12px;font-family:tahoma;}
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
:50%;
}
div#content {
position:relative;
:-50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>鐜板湪鎴戜滑瑕佷娇杩欐�垫枃瀛楀瀭鐩村眳涓�鏄剧ず锛�
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
:50%;
}
div#content {
border:1px solid #000;
position:relative;
:-50%;
}</pre>
</div>
</div>
</div>
</body>
</>
浜斻€佸畬缇庣殑瑙ｅ喅鏂规��
閭ｄ箞鎴戜滑缁煎悎涓婇潰涓ょ�嶆柟娉曞氨鍙�浠ュ緱鍒颁竴涓�瀹岀編鐨勮В鍐虫柟妗堬紝涓嶈繃杩欒�佺敤鍒癈SS hack鐨勭煡璇嗐€傚�逛簬濡傛灉浣跨敤CSS Hack鏉ュ尯鍒嗘祻瑙堝櫒锛屼綘鍙�
浠ュ弬鑰冭繖绡団€滅畝鍗旵SS hack锛氬尯鍒咺E6銆両E7銆両E8銆丗irefox銆丱pera鈥濓細
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_:50%;
}
div#content {
_position:relative;
_:-50%;
}
鑷虫�わ紝涓€涓�瀹岀編鐨勫眳涓�鏂规�堝氨浜х敓浜嗐€�
<!DOCTYPE PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" ":w3./TR/x1/DTD/x1-transitional.dtd">
< xmlns=":w3./1999/x">
<head>
<title> 澶氳�屾枃瀛楀疄鐜板瀭鐩村眳涓� </title>
<meta -equiv="Content-Type" content="text/; charset=utf-8" />
<style type=text/css>
body { font-size:12px;font-family:tahoma;}
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_:50%;
}
div#content {
_position:relative;
_:-50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>鐜板湪鎴戜滑瑕佷娇杩欐�垫枃瀛楀瀭鐩村眳涓�鏄剧ず锛�
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
:50%;
}
div#content {
border:1px solid #000;
position:relative;
:-50%;
}</pre>
</div>
</div>
</div>
</body>
</>
p.s. 鍨傜洿灞呬腑vertical-align鐨勫€兼槸middle锛岃€屾按骞冲眳涓璦lign鐨勫€兼槸center锛岃櫧鐒跺悓鏄�灞呬腑浣嗗叧閿�瀛椾笉鍚�
鎬庝箞瀹炵幇CSS鍨傜洿灞呬腑鍛�锛�
<!DOCTYPE PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" ":w3./TR/x1/DTD/x1-transitional.dtd">
< xmlns=":w3./1999/x">
<head>
<meta -equiv="Content-Type" content="text/; charset=gb2312" />
<title>鏃犳爣棰樻枃浠�</title>
<style type=text/css>
*{ margin:0; padding:0;}
.one{ width:200px; height:200px; background:blue; position:absolute; :50%; left:50%;margin:-100px 0 0 -100px; color:#FFF;}
p{ margin:0 auto; width:300px; height:28px; line-height:28px; background:red;}
</style>
</head>
<body>
<div class="one">杩欐槸涓€涓�灞傚瀭鐩存按骞冲眳涓�涓庢祻瑙堝櫒</div>
<p>娈佃惤鍐呮枃瀛楀瀭鐩村眳涓�娈佃惤鍐呮枃瀛楀瀭鐩村眳涓�</p>
</body>
</>
濡備綍鐢╢loat瀹炵幇灞呬腑
绋嬪紡鐮佸�備笅:
<div class="favViewicon ">
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
鍏充簬position:relative锛屽畠灏嗕緷鎹甽eft锛宺ight锛岋紝bottom绛夊睘鎬у湪姝ｅ父鏂囦欢娴佷腑鍋忕Щ浣嶇疆銆傞偅鎴戜滑鍙�浠ヨ�﹗l涓簆osition:relative;left:50%锛岀劧鍚庡啀璁﹍i鍍忓乏娴�鍔�锛屽湪璁╁畠position:relative;right:50%锛堟垨鑰卨eft:-50%锛夛紝閭ｄ箞li灏卞儚鍚戜腑闂存诞鍔ㄤ竴鏍峰眳涓�浜嗐€�
濡備綍瀹炵幇CSS灞呬腑
鏄�瑕佷粈涔堝眳涓�锛�
1. 鏂囧瓧灞呬腑: 鐢╰ext-align: center
2. 妯＄粍灞呬腑: div{width: 100px; margin: auto}
3. 缁濆�瑰畾浣嶏細div{
position: absolute;
: 50%;
left: 50%;
width: 100px;
height:100px;
margin-left: -50px;
margin-: -50px;
}
CSS鍦↖E6鎬庝箞瀹炵幇缃戦〉灞呬腑
涓昏�佺殑鏍峰紡瀹氫箟濡備笅锛�
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
璇存槑锛�
棣栧厛鍦ㄧ埗绾у厓绱犲畾涔塗EXT-ALIGN: center;杩欎釜鐨勬剰鎬濆氨鏄�鍦ㄧ埗绾у厓绱犲唴鐨勫唴瀹瑰眳涓�锛涘�逛簬IE杩欐牱璁惧畾灏卞凡缁忓彲浠ヤ簡銆備絾鍦╩ozilla涓�涓嶈兘灞呬腑銆傝В鍐冲姙娉曞氨鏄�鍦ㄥ瓙鍏冪礌瀹氫箟鏃跺€欒�惧畾鏃跺啀鍔犱笂鈥淢ARGIN-RIGHT: auto;MARGIN-LEFT: auto; 鈥�
闇€瑕佽�存槑鐨勬槸锛屽�傛灉浣犳兂鐢ㄨ繖涓�鏂规硶浣挎暣涓�椤甸潰瑕佸眳涓�锛屽缓璁�涓嶈�佸�楀湪涓€涓狣IV閲岋紝浣犲彲浠ヤ緷娆℃媶鍑哄�氫釜div锛屽彧瑕佸湪姣忎釜鎷嗗嚭鐨刣iv閲屽畾涔塎ARGIN-RIGHT: auto;MARGIN-LEFT: auto; 灏卞彲浠ヤ簡銆�
濡備綍浣垮浘鐗囧湪DIV 涓�鍨傜洿灞呬腑
鐢ㄨ儗鏅�鐨勬柟娉曘€備妇渚嬶細
body{BACKGROUND: url(:w3./style/001/logo_w3_194x79.gif) #FFF no-repeat center;}
鍏抽敭灏辨槸鏈€鍚庣殑center,杩欎釜寮曟暟瀹氫箟鍥剧墖鐨勪綅缃�銆傝繕鍙�浠ュ啓鎴愨€� left鈥�(宸︿笂瑙�)鎴栬€�"bottom right"绛夛紝涔熷彲浠ョ洿鎺ュ啓鏁板€�"50 30"
鏁堟灉濡備笅锛�
濡備綍浣挎枃瀛楀湪DIV涓�鍨傜洿灞呬腑
濡傛灉鏄�鏂囧瓧锛屼究涓嶈兘鐢ㄨ儗鏅�鏂规硶锛屽彲浠ョ敤澧為珮琛岃窛鐨勫姙娉曞彉閫氬疄鐜板瀭鐩村眳涓�锛屽畬鏁寸▼寮忕爜濡備笅锛�
<>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body>
<div id="center"><p>test content</p></div>
</body>
</>
璇存槑锛�
vertical-align:middle;琛ㄧず琛屽唴鍨傜洿灞呬腑锛屾垜浠�灏嗚�岃窛澧炲姞鍒板拰鏁翠釜DIV涓€鏍烽珮line-height:200px;鐒跺悗鎻掑叆鏂囧瓧锛屽氨鍨傜洿灞呬腑浜�
CSS瀹炵幇DIV鐩掑瓙灞呬腑鎬庝箞涓嶈�屼簡
浣犲厛寤虹珛涓€涓�澶х殑DIV鐒跺悗鎶婁綘鎯冲眳涓�鐨凞IV鏀捐繘鍘荤劧鍚庣敤 margio: 0 auto;
涓€鑸�鏄�璁惧畾margin-left:auto 鍜� margin-right:auto灏卞彲浠ヤ簡锛屽叿浣撴儏鍐典綘璐寸▼寮忕爜鏉ョ湅
微信收款码
支付宝收款码