ÓÃ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 ±»ºöÂԵij£Ê¶
ÎÄÕ·ÖÀà:Webǰ¶Ë
1¡¢²»ÒªÊ¹ÓùýСµÄͼƬ×ö±³¾°Æ½ÆÌ¡£Õâ¾ÍÊÇΪºÎºÜ¶àÈ˶¼²»Óà 1px µÄÔÒò£¬Õâ²ÅÖªÏþ¡£¿í¸ß 1px µÄͼƬƽÆÌ³öÒ»¸ö¿í¸ß 200px µÄÇøÓò£¬ÐèÒª 200*200=40, 000 ´Î£¬Õ¼ÓÃ×ÊÔ´¡£
2¡¢Îޱ߿ò¡£ÍƼöµÄд·¨ÊÇ border:none;£¬¹þ¹þ£¬ÎÒÒ»Ö±ÔÚÓÃÕâ¸ö¡£ border:0; Ö»ÊǶ¨Òå±ß¿ò¿í¶ÈΪÁ㣬µ«±ß¿òÑùʽ¡ ......
½ñÌ쿪ʼ×öÎÒÃǹ«Ë¾ÄÚ²¿Ê¹ÓõÄITSMϵͳµÄ¾²Ì¬Ò³Ã棬Õâ¸öÒ³ÃæºÃ¸´ÔÓ£¬µ±È»£¬ÎÒÊÇÒ»¸ö²Å¿ªÊ¼×öÒ³ÃæµÄ¼Ò»ï£¬ËùÒÔ¶ÔÎÒÀ´Ëµ»¹ÓÐÒ»¶¨µÄÄѶȡ£²àÀ¸ÒªÕÛµþ£¬²Ëµ¥ÒªJs¿ØÖÆ£¬ÎÒ±¾À´ÒÔǰÊǸã±à³ÌµÄ£¬¶¼ÊÇÖ±½ÓÓÃÈ˼ҵÄÒ³Ãæ£¬cssºÍjs¶¼Ö»ÊÇ»áÒ»µãƤ룬ÏÖÔÚÉ˵½ÎÒµÄÐÄÁË¡£
½ñÌ컹ÓÐÒ»¸ö²»ÐÒµÄÏûÏ¢£¬ÎÒ¾¹È»¹ÒÁËÒ»¿Æ£¬´óѧ4ÄêµÄÇå°×Éú»î°¡ ......
<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*/   ......
Ò»¡¢ÐǺÅ*
Ó¦¸ÃÊǸöͨÅä·û¡£±ÈÈç
<style type="text/css">
.roundBorder *
{
background: white;
display: block;
height: 1px;
overflow: hidden;
}
</style>
……
<b class="roundBorder">
<b class="round ......
ÔÚJSPÒ³ÃæÉϼÓÈë
<%String path = request.getContextPath();%>
<link href="<%=path%>/css/style.css" rel="stylesheet" type="text/css">
ÏÂÁз½Ê½Ã²ËƲ»ÐУº
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../../css/style.css" rel ......