• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
Orange.
生如夏花之绚烂,死如秋叶之静美
博客园    首页    新随笔    联系   管理    订阅  订阅

DIV 垂直 垂直水平 居中

DIV 垂直 居中
让div居中对齐 使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。  .style{margin-left:auto;margin-right:auto;}  缩写形式为:  .style{margin:0 auto;}  数字0 表示上下边距是0。可以按照需要设置成不同的值。 
<style type="text/css">
 .align-center{
    margin:0 auto; /* 居中 这个是必须的,,其它的属性非必须 */
    width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
    background:red; /* 背景色 */
     /* 文字等内容居中 text-align:center;*/
}
</style>
 
@Html.Partial("_PartialMenuImg", "../../Images/Sys/test.jpg")
 
<div class="align-center"></div>
 
DIV 垂直水平 居中
1,关于居中使用css为:position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;  对于ie6,只能把position:改成absolute; 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>水平垂直居中div演示效果</title>
<style type="text/css">
.align-center{
position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
}
</style>
</head>
<body>
<div class="align-center">水平垂直居中div演示效果</div>
</body>
</html>
 

作者:Orange.
出处:http://www.cnblogs.com/Orange-C/
声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。 如果大家感觉我的博文对大家有帮助,请推荐支持一把,给我写作的动力。 。

posted @ 2014-10-22 10:44  Orange.  阅读(593)  评论(1)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3