×÷ÕߣºØýÃû ÎÄÕÂÀ´Ô´£º²»Ïê µã»÷Êý£º ÔÚÏßͶ¸å Ͷ¸åÖ¸ÄÏ  |
ÈÃͼƬ´¹Ö±¾ÓÖеķ½·¨.
ͼƬµÄ¿í¶ÈºÍ¸ß¶ÈÊÇδ֪µÄ£¬Ã»ÓÐÒ»¸ö¹Ì¶¨µÄ³ß´ç£¬ÔÚÕâ¸öǰÌáÏÂҪʹͼƬÔÚÒ»¸ö¹Ì¶¨ÁË¿í¶ÈºÍ¸ß¶ÈµÄÈÝÆ÷Öд¹Ö±¾ÓÖУ¬ÏëÏë¸Ð¾õ»¹ÊÇͦÂé·³µÄ£¬ÓÉÓÚ×î½üµÄÏîÄ¿¿ÉÄÜ»áÓõ½Õâ¸ö·½°¸£¬ËùÒÔ°ÑһЩ³£Óõķ½·¨¶¼ÊÕ¼¯ÕûÀíÁËһϡ£ÏÂͼÊÇÀíÏëÖеÄЧ¹ûͼ£¬ÍⲿÈÝÆ÷µÄ¿í¶ÈºÍ¸ß¶ÈÊǹ̶¨µÄ£¬ÖмäµÄͼƬ¿í¶ÈºÍ¸ß¶Èδ֪£¬µ«ÊÇͼƬҪʼÖÕÒªÏà¶ÔÓÚÍⲿµÄÈÝÆ÷´¹Ö±¾ÓÖС£µ«ÊÇʵ¼ÊÖÐʵÏÖµÄЧ¹û²¢²»ÊǺÜÍêÃÀ£¬ÓÉÓÚ¸÷ä¯ÀÀÆ÷µÄ½âÎö¶¼¸÷²»Ïàͬ£¬ËùÒÔ¸÷ä¯ÀÀÆ÷¶¼»áÓÐ1px-3pxµÄÆ«²î¡£·½·¨Ò» (XHTML 1.0 transitional)£º¸Ã·½·¨Êǽ«ÍⲿÈÝÆ÷µÄÏÔʾģʽÉèÖóÉdisplay:table£¬img±êÇ©ÍⲿÔÙǶÌ×Ò»¸öspan±êÇ©£¬²¢ÉèÖÃspanµÄÏÔʾģʽΪdisplay:table-cell£¬ÕâÑù¾Í¿ÉÒԺܷ½±ãµÄʹÓÃvertical-alignÏó±í¸ñÔªËØÄÇÑù¶ÔÆëÁË£¬µ±È»ÕâÖ»ÊÇÔÚ±ê×¼ä¯ÀÀÆ÷Ï£¬IE6/IE7»¹µÃʹÓö¨Î»¡£HTML½á¹¹²¿·Ö£º <div id="box"> <span><img src="images/demo.jpg" alt=""></span></div> CSSÑùʽ²¿·Ö£º <style type="text/css">#box{width:500px;height:400px;display:table;text-align:center;border:1px solid #d3d3d3;background:#fff;}#box span{display:table-cell;vertical-align:middle;}#box img{border:1px solid #ccc;}</style><!--[if lte IE 7]><style type="text/css">#box{position:relative;overflow:hidden;}#box span{position:absolute;left:50%;top:50%;}#box img{position:relative;left:-50%;top:-50%;}</style><![endif]--> ·½·¨¶þ (XHTML 1.0 transitional)£º·½·¨¶þºÍ·½·¨Ò»µÄʵÏÖµÄÔÀí´óͬСÒ죬½á¹¹Ò²ÊÇÏàͬµÄ£¬·½·¨Ò»ÓõÄÊÇÌõ¼þ×¢ÊÍ£¬·½·¨¶þ¾ÍÓõÄCSS Hack¡£CSSÑùʽ²¿·Ö£º <style type="text/css">#box{width:500px;height:400px;overflow:hidden;position:relative;display:table-cell;text-align:center;vertical-align:middle;border:1px solid #d3d3d3;background:#fff;}#box span{position:static;*position:absolute; /*Õë¶ÔIE6/7µÄHack*/top:50%; /*Õë¶ÔIE6/7µÄHack*/}#box img {position:static;*position:relative; /*Õë¶ÔIE6/7µÄHack*/top:-50%;left:-50%; /*Õë¶ÔIE6/7µÄHack*/border:1px solid #ccc;}</style> ¸Ã·½·¨Óиö±×¶Ë£¬ÔÚ±ê×¼ä¯ÀÀÆ÷ÏÂÓÉÓÚÍⲿÈÝÆ÷#boxµÄÏÔʾģʽΪdisplay:table-cell£¬ËùÒÔµ¼ÖÂ#boxÎÞ·¨Ê¹ÓÃmarginÊôÐÔ£¬²¢ÇÒÔÚIE8ÏÂÉèÖñ߿òÒ²ÎÞЧ¡£·½·¨Èý (XHTML 1.0 strict)£º±ê×¼ä¯ÀÀÆ÷»¹Êǽ«ÍⲿÈÝÆ÷#boxµÄÏÔʾģʽÉèÖÃΪdisplay:table-cell£¬IE6/IE7ÊÇÀûÓÃÔÚimg±êÇ©µÄÇ°Ãæ²åÈëÒ»¶Ô¿Õ±êÇ©µÄ°ì·¨¡£HTML½á¹¹²¿·Ö£º <div id="box"><i></i><img src="images/demo.jpg" alt=""></div> CSSÑùʽ²¿·Ö£º <style type="text/css">#box{width:500px;height:400px;display:table-cell;text-align:center;vertical-align:middle;border:1px solid #d3d3d3;background:#fff;}#box img{border:1px solid #ccc;}</style><!--[if IE]><style type="text/css">#box i { display:inline-block; height:100%; vertical-align:middle }#box img { vertical-align:middle }</style><![endif]--> ·½·¨ÈýҲͬÑùÊÊÓÃXHTML 1.0 transitional¡£ÒÔÉÏ·½·¨¶¼ÊÇÊÕ¼¯ÓÚÍøÒ³½ÌÑ§Íø£¬ÔÝʱֻ¶ÔÕâ3¸ö·½·¨±È½ÏÂúÒ⣬¼æÈÝÐÔ·½Ãæ²»´í£¬Ê¹ÓÃÆðÀ´µÄÏÞÖÆÒ²±È½ÏС£¬»¹ÓÐЩ·½·¨ÎÒÒ²¶¼Ò»Ò»²âÊÔ¹ý£¬Ð§¹û¶¼²»ÀíÏ룬ÔÚ¸÷ä¯ÀÀÆ÷ÖеIJîÒì±È½Ï´ó¡£ÁíÍâ˾ͽÕýÃÀÕâÀïÒ²ÊÕ¼¯ÁËһЩ·½·¨¡£Ë¼¿¼£ººÜ¶à·½·¨¶¼ÊÇÒÀÀµÓÚ½«ÍⲿÈÝÆ÷µÄÏÔʾģʽÉèÖóÉtable²ÅÄÜʵÏÖ´¹Ö±¾ÓÖУ¬Ò²¾ÍÊÇdivÀ´Ä£Äâtable£¬Èç¹ûCSSÓÐÒ»¸öÊôÐÔÀ´ÊµÏÖÕâÖÖЧ¹ûÄǸöàºÃ¡£Èç¹ûÄãÒ²Óкõķ½·¨£¬»¶ÓÄãÀ´·ÖÏí¡£ÔÎÄ£ºhttp://stylechen.com/img-middle.html
|
ÐÅÑôµçÄÔÍøÉêÃ÷:±¾Õ¾×ÊÔ´À´Ô´ÓÚ»¥ÁªÍø,°æÈ¨¹éÔ×÷ÕßËùÓУ¬ÈçÓÐÇÖȨÇëÁªÏµÎÒÃÇ,ÎÒÃǽ«ÔÚÊÕµ½ÏûÏ¢ºó24СʱÄÚɾ³ý.
ÉÏһƪÎÄÕ£º iOS4.2¶ÔÖ§³ÖHTML5ÐÂÌØÐÔ |
ÏÂһƪÎÄÕ£º ¿ª·¢web app³õ̽:HTML5±¾µØ´æ´¢ |
¡¾×ÖÌ壺С ´ó¡¿¡¾·¢±íÆÀÂÛ¡¿¡¾¼ÓÈëÊղء¿¡¾¸æËߺÃÓÑ¡¿¡¾´òÓ¡´ËÎÄ¡¿¡¾¹Ø±Õ´°¿Ú¡¿ |
¡¡ ¡¡ÍøÓÑÆÀÂÛ£º£¨Ö»ÏÔʾ×îÐÂ10Ìõ¡£ÆÀÂÛÄÚÈÝÖ»´ú±íÍøÓѹ۵㣬Óë±¾Õ¾Á¢³¡Î޹أ¡£© |
|
|