ÓÃDIV+CSS²¼¾ÖÖÐ,ÈçºÎÉèÖÃͼƬÓëÎÄ×ÖÔÚͬһ¸ß¶È?
Èç¹û°ÑÎÄ×ÖºÍͼƬ·ÅÔÚͬһ¸öͼ²ãµÄ£¬ÎÄ×Ö¿ÉÒÔ×öµ½¾ÓÖУ¬µ«ÊÇͼƬ¾Í²»ÄÜ£¬ÒòΪͼƬĬÈÏÊÇ×óÉÏ¶ÔÆëµÄ£¡Õâ¾ÍÊÇΪʲôÔÚÖÆ×÷µÄʱºò¿´µ½Í¼Æ¬
»á¿¿ÉϵÄÔÒò¡£Èç¹ûÄãÁͼƬ¾ÓÖÐÁË£¬ÎÄ×־ͻáÏà¶ÔÓÚͼƬÓÒÏÂ¶ÔÆëÁË£¡Èç¹ûÄãÏë2¸ö¶¼¾ÓÖеϰ£¬¾Í²»ÄܰÑËûÃÇ·ÅÔÚͬһ¸ödiv,»òÕßÄãÊÔÏÂ
°ÑËûÃÇ·ÅÔÚ2¸ödivÖУ¬»òÕßÒ»¸öͼƬ·ÅdivÖУ¬ÎÄ×ÖÖ±½Ó·ÅÒ³ÃæÖУ¬²»·Ådiv £¬ÕâÑù»¹¿ÉÒÔ¸øÍøÒ³ÊÝÉí¡£
°ÑÄǸö·ÅͼƬºÍÎÄ×ֵIJãcssÉèÖÃΪ±ÈÈçid½Ð#aa
#aa {height: 30px; line-height:30px; vertical-align: middle;}
ÕâÑù¾Í¿ÉÒÔʹÀïÃæµÄ¶«Î÷ÔÚ²ãÀï´¹Ö±¾ÓÖÐÁË¡£Ò»¶¨ÒªÉèÖÃÏàͬ¸ß¶ÈºÍ¼ä¾à¡£
°ÑͼƬ¼ÓÉÏalign="absmiddle"
<img src="http://img.baidu.com/img/logo-zhidao.gif" align="absmiddle" />
ÎÒÊÇÓÃÕâ¸ö·½·¨½â¾öµÄ¡£
ÎÒµÄÎÄ×ÖºÍͼƬÔÚͬһ¸öspanÀïÃæ£¬ÎÒÔÚͼƬÖмÓÉÏÕâ¸öÊôÐԾͽâ¾öÎÊÌâÁË¡£µ«ÊÇÖ±½ÓдÔÚÒ³ÃæÀïÃæÊÇ·ñÓбíÏֺͽṹ²»·ÖÀëµÄÏÓÒÉÄØ£¿ºÇºÇ
²¹³äÏ£ºÎÄ×Ö¾ÓÖеģ¬Ö»ÒªÓÃline-height¾Í¿ÉÒÔ¿ØÖƾÓÖУ¬Í¼Æ¬¾ÓÖеϰ£¬ÒªÓÃpadding»òÕßmargin!
¡¡¡¡ DIVûÓÐÎÄ×Ö´¹Ö±¾ÓÖÐÊôÐÔ£¬Õâ¸öȷʵÊǸöȱÏÝÎÊÌâ¡£
ÐèÒª°ÑͼƬºÍµ¥ÐÐÎÄ×Ö´¹Ö±¾ÓÖÐ¶ÔÆä£¬¿ÉÒÔ¸øÍ¼Æ¬ µÄCSS ¶¨ÒåÒ»¸övertical-align: middle; µÄÊôÐÔ£¬ÕâÑù µ¥ÐÐÎÄ×־ͿÉÒÔ´¹Ö±¾ÓÖÐÓÚͼƬÁË¡£
¡¡¡¡Èç¹û¶àÐУ¬Ö»ÄܲÉÓÃǶÌ×DIV µÄ·½Ê½£¬È»ºóµ÷Õûmargin ²»Òªµ÷Õûpadding¡£ ÔÚIE6ÀïÃæ¶¨ÒåÁË ¸ß¶È »òÕß¿í¶ÈµÄDIV ʹÓÃpadding»á³öÏÖbug¡£
¡¡¡¡ÁíÍâ¿ÉÒÔʹÓÃÔ±¾µÄ°ì·¨£¬¸øÍ¼Æ¬ÄÚ²¿ÉèÖÃÊôÐÔalign="absmiddle"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div ÀïÃæÍ¼Æ¬´¹Ö±¾ÓÖеöÀý×Ó</title>
<style type="text/css">
<!--
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #666;
overflow:hidden;
position:relative;
text-align:center;
}
div dt {
+position:absolute;
top:50%;
vertical-align:middle
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
-->
</style>
</head>
<body>
Ïà¹ØÎĵµ£º
´Ó½ñÌ쿪ʼ£¬CSSÉè¼Æ½Ì³ÌºÍ´ó¼Ò¼ûÃæÁË¡£Ã¿ÌìÒ»½Ú£¬ÓÐѧϰµÄͬѧÇëÿÌì¹Ø×¢ÎÒÃÇÍøÕ¾¡£
Àý1£1 ±³¾°Í¼Æ¬
µÚÒ»¸öÀý×ÓչʾÁ˶ÔbackgroundÊôÐÔµÄÔËÓ㬱¾Àý×Ó°ÑbackgroundÊôÐÔÓëÒ»¸ödivÔªËØÏà½áºÏ¡£divµÄ´óСΪ250pxX76px£¬ËùÒÔËü»áÏÔʾ³öÒ»¸öÍêÕûµÄ±³¾°Í¼Æ¬¡£
ÒÔÏÂÊDZ¾ÊµÀýµÄÏêϸ³ÌÐò£¬µ÷ÊÔÔÚMicrosoft Visual Studio 2010°æ ......
idºÍclassµ½µ×ÒªÓÃÄÄÒ»¸ö£¿
¡¡¡¡Ê×ÏÈÒªÃ÷°×idºÍclassµÄ¸÷×ÔµÄÓÅȱµã¡£ÕâÑù²ÅÄܸù¾ÝËûÃǵĸ÷×ÔµÄÌØµã½øÐÐʹÓá£
¡¡¡¡idµÄÓŵ㣨classµÄȱµã£©£ºidдÔÚcssÓÃ"#"Ñ¡ÔñÆ÷£¬classдÔÚcssÖÐÓÃ"."Ñ¡ÔñÆ÷¡£"#"Ñ¡ÔñÆ÷µÄÓÅÏȼ¶¸ßÓÚ"."Ñ¡ÔñÆ÷´óÔ¼10±¶£¬ËùÒÔµ±ÄãÐèÒªÌáÉýÓÅÏȼ¶µÄʱºò£¬id±êÇ©£¬»òÕßidÈÝÆ÷ÄڵıêÇ©½«ÊǺÜÈÝÒ׺ÍÓÐЧµÄ¡£ ......
overflow´Ó×ÖÃæÒâÒåÉÏÀ´½²¾ÍÊÇÒç³öµÄÒâ˼唄£¬»»¾ä»°Ëµ£¬ÄãÓиö²ã£¬µ«ÊÇÀïÃæµÄÄÚÈÝ£¬Í¼Æ¬»òÕßÎÄ×ÖÒª±È²ã´ó£¬overflow¾ÍÊÇÕë¶ÔÕâÖÖÇé¿ö½øÐд¦ÀíµÄ¡£
°üº¬4¸öÊôÐÔÖµ£¬visible,hidden,auto,scroll
visible¾ÍÊdz¬³öµÄÄÚÈÝÈÔÈ»Õý³£±»ÏÔʾ³öÀ´¡£
hidden¾ÍÊdz¬³öµÄÄÚÈݱ»Òþ² ......
<body style="background-color:#000" mce_style="background-color:#000">
<div style="background-color:#fff; width:500px; height:200px; filter:alpha(opacity='50'); opacity:0.5">Õâ¸ö±³¾°ÊÇ͸Ã÷µÄ</div>
</body>
/*IE*/
filter:alpha(opacity='50');
/*FF*/   ......
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
fieldset, img {
border: 0;
}
table {
border-co ......