[心缘地方]同学录
首页 | 功能说明 | 站长通知 | 最近更新 | 编码查看转换 | 代码下载 | 常见问题及讨论 | 《深入解析ASP核心技术》 | 王小鸭自动发工资条VBA版
登录系统:用户名: 密码: 如果要讨论问题,请先注册。

[备忘]解决一个简单的div+css的垂直居中的问题

上一篇:[转帖]Javascript中的Trim方法……
下一篇:[备忘]CVS Server变更IP时,客户端的替换方法。

添加日期:2007/7/28 13:44:21 快速返回   返回列表 阅读4389次
HTML很简单:


<div id="locationArea">
    <div id="locationBlock">
          当前位置:<A href="index.asp">首页</A></div>
    <div id="onlineUserBlock">xx</div>
    <div id="otherBlock">
        <a href="$" onClick="showHiddenFunctionMenu();return false;" title="打开/关闭功能菜单"><IMG src="images/show-hide.gif" alt="打开/关闭功能菜单" width="15" height="14" border="0" align="absmiddle">Menu</a>
    </div>
</div>



改了半天,CSS改成如下:


#locationArea{
    width:760px;
    height:22px;
    margin:0 auto;
    text-align:left;
    background-color:#FBF0F0;
    border-bottom:1px solid #990000;
    vertical-align:middle;
    line-height:22px;
}
/*共三个块:当前位置,在线用户,小图片*/
#locationBlock{
    width:490px;
    height:100%;
    float:left;
}
#onlineUserBlock{
    width:220px;
    height:100%;
    float:left;
}
#otherBlock{
    width:50px;
    height:100%;
    float:left;
}



其中用了:
    vertical-align:middle;
    line-height:22px;
来实现垂直居中,但是发现FireFox中效果很好……

而IE则otherBlock没有居中,始终在靠上。

折腾半天,发现把链接中那个IMG去掉就能居中……

所以,直接咔嚓掉,CSS增加一个:


#otherBlock A{ /* 显示隐藏功能菜单*/
    width:100%;height:100%;
    background:url(images/show-hide.gif) no-repeat left center;
    padding-left:15px;
}



恩,问题解决!
 

评论 COMMENTS
没有评论 No Comments.

添加评论 Add new comment.
昵称 Name:
评论内容 Comment:
验证码(不区分大小写)
Validation Code:
(not case sensitive)
看不清?点这里换一张!(Change it here!)
 
评论由管理员查看后才能显示。the comment will be showed after it is checked by admin.
CopyRight © 心缘地方 2005-2999. All Rights Reserved