Ò׽ؽØÍ¼Èí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

CSS ´¹Ö±¾ÓÖÐ

1.ͼƬµÄ´¹Ö±¾ÓÖÐ
  .box
{
/*·ÇIEµÄÖ÷Á÷ä¯ÀÀÆ÷ʶ±ðµÄ´¹Ö±¾ÓÖеķ½·¨*/
display: table-cell;
vertical-align: middle; /*ÉèÖÃˮƽ¾ÓÖÐ*/
text-align: center;

/* Õë¶ÔIEµÄHack */
*display:block;
*font-size:175px;/*ԼΪ¸ß¶ÈµÄ0.873£¬200*0.873 ԼΪ175*/
*font-family:Arial;/*·ÀÖ¹·Çutf-8ÒýÆðµÄhackʧЧÎÊÌ⣬Èçgbk±àÂë*/

width:200px;
height:200px;
border:1px solid #eee;
}
.box img
{
/*ÉèÖÃͼƬ´¹Ö±¾ÓÖÐ*/
vertical-align: middle;
}
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" mce_src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>
²Î¿¼ÎÄÕ£º
http://www.planabc.net/2008/05/26/img_vertical_center_solution/
http://www.student.oulu.fi/~laurirai/www/css/middle/  


Ïà¹ØÎĵµ£º

ÍøÉÏ¿´µ½µÄһЩCSS¹¤¾ß×ÊÔ´


ÍøÉÏ¿´µ½µÄһЩCSS¹¤¾ß×ÊÔ´
ÔÚÏßCSS¹¤¾ß£º
W3C CSS УÑé·þÎñ :ÌṩÍòÎ¬ÍøÐ­»á(W3C)Ñùʽ±í(CSS)УÑé·þÎñ¡£
CSS ÔÚÏ߱༭Æ÷:OnLine CSS Designer - CSS Style Editor¡£ CSS ÑùʽÔÚÏ߱༭Æ÷£¬¿ÉÒÔ¼´Ê±²é¿´CSS ÑùʽЧ¹ûÑÝʾ¡£
QrONE CSS Designer £ºÔÚÏßCSS±à¼­Æ÷£¬Ëù¼û¼´ËùµÃ¡£
SKUER - The CSS Search Engine :SKUER ......

Javascript+css ʵÏÖÍøÒ³»»·ô¹¦ÄÜ


ÏÖÔÚÍøÕ¾»»Æ¤·ôÊDZȽϳ£¼ûµÄ¹¦ÄÜ£¬´ó¶àÊýÂÛ̳¶¼Óеģ¬ÒªÏëʵÏÖÕâÑùЧ¹û¿ÉÒÔ¿´ÈçÏ´úÂ룺Html´úÂ벿·Ö:
1.ÒªÓÐÒ»¸ö´øidµÄÑùʽ±íÁ´½Ó,ÎÒÃÇҪͨ¹ý²Ù×÷Õâ¸öÁ´½ÓÀ´µ÷Óò»Í¬µÄhref.
<link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" />
2.Ƥ·ôÑ¡Ôñ°´Å¥(ºǫ́Ϊÿ¸öliÌí¼Óonclickʼþ,´¥·¢»»· ......

cssÖеĴ¹Ö±¾ÓÖУ¬²»Í¬ÓÚÔÚTableÖÐ

´¹Ö±¾ÓÖжԱí¸ñÀ´ËµÊÇС²ËÒ»µú£¬Ö»ÐèÖ¸¶¨µ¥Ôª¸ñΪvertical-align: middle¼´¿É£¬
µ«ÕâÔÚcss²¼¾ÖÖв»¹ÜÓ᣼ÙÉèÄ㽫һ¸öµ¼º½²Ëµ¥µÄ¸ß¶ÈÉèΪ2em£¬
È»ºóÔÚcssÖÐÖ¸¶¨´¹Ö±¶ÔÆëµÄ¹æÔò£¬ÎÄ×Ö»¹ÊǻᱻÅŵ½ºÐµÄ¶¥²¿£¬¸ù±¾Ã»ÓÐÊ²Ã´Çø±ð¡£
Òª½â¾öÕâÒ»ÎÊÌ⣬ֻÐ轫ºÐµÄÐиßÉèΪÓëºÐµÄ¸ß¶ÈÏàͬ¼´¿É£¬
ÒÔÕâ¸öÀý×ÓÀ´Ëµ£¬ºÐ¸ß2em,ÄÇôֻР......

DIV+CSSÄѵãÖ®¾­Ñé×ܽá

1¡¢ÍøÒ³¾ÓÖÐÏÔʾ£º
    ÐèÒªÉèÖÃÁ½¸öµØ·½£¬Ò»¸öÊÇbody£¬Ò»¸öÊÇÍâ±ß¿òdiv¡£
    CSS£º
body{
 margin:0;
 padding:0;
 text-align:center;
}
#main{ /*×îÍâ²ãDIV*/
 width:760px;
 margin:0 auto;
 padding:0
}
    2¡¢ÎÄ×Ö´¹Ö±¾ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ