`
fp_moon
  • 浏览: 970512 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

DIV根据内容宽度、高度自适应，垂直水平居中

 
阅读更多

<!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">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="author" content="Chomo" />
  <title>根据内容宽度、高度自适应，垂直水平居中，内容高度超过窗体时，垂直居顶</title>
  <style type="text/css">
   html { height:100%;}
   body { height:100%; text-align:center;}
   .centerDiv {
      display:inline-block;
      zoom:1;
      *display:inline;
      vertical-align:middle;
      text-align:left;
      width:200px;
      padding:10px;
      border:1px solid #f60;
      background:#fc0;}
   .hiddenDiv {
      height:100%;
      overflow:hidden;
      display:inline-block;
      width:1px;
      margin-left:-1px;
      zoom:1;
      *display:inline;
      *margin-top:-1px;
      margin-top:0;
      vertical-align:middle;
      background-color: #CC6699;}
  </style>
 </head>
 <body> 
  <div class="centerDiv">
   蓝色理想<br/>
   蓝色理想<br/>
   蓝色理想<br/>
   蓝色理想<br/>
   蓝色理想<br/>
   蓝色理想<br/>
   蓝色理想<br/>
   蓝色理想<br/>
   蓝色理想<br/>
   蓝色理想<br/>
   蓝色理想<br/>
   蓝色理想<br/>
  </div><div class="hiddenDiv"></div>
  <div  style=""></div>
 </body>
</html>

分享到：
| 使用navigator.userAgent来判断浏览器类型
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css 水平居中，垂直居中，自适应宽度的代码

    一、宽度自适应的元素水平居中： 　1.宽度自适应的元素可以是：绝对位定、浮动元素、行内元素。而我们通常布局，肯定不会用行内元素，所以会选择，绝对定位或浮动。 2.居中：这里我们应该会想到1/2、50%、一半等...

    div或img图片高度随宽度自适应的方法

    该方法主要用来做网站自适应的，同时可以实现撑起内容高度，避免图片加载后导致的页面滚动。 一、可以使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度（这里就不具体为大家细说了）。 利用js来实现...

    div+css有实例,易学易懂

    6.3.3 已知容器的大小而未知内容大小的水平和垂直居中问题 6.3.4 容器的大小和内容大小均未知的水平和垂直居中 6.3.5 修饰图片的水平和垂直居中 6.4 字体的综合属性 6.4.1 字体的选择 6.4.2 字体的大小 6.4.3 字体的...

    46种常见的浏览器兼容性问题大汇总

    9. Div的垂直居中问题 3 10. margin加倍的问题 3 11. IE与宽度和高度的问题 3 12. 页面的最小宽度 3 13. DIV浮动IE文本产生3象素的bug 3 14. IE捉迷藏的问题 3 15. float的div闭合;清除浮动;自适应高度 3 16....

    《CSS全程指南》随书光盘

    9.5.3 二列右列宽度自适应 208 9.5.4 二列固定宽度居中 209 9.6 三列布局 210 9.6.1 中列宽度自适应 210 9.6.2 三栏布局 212 9.7 高度自适应 215 9.8 小结 216 第4篇 实战演习 第10章 div+CSS打造Blog版面 218 10.1 ...

    CSS网站布局实录 （第二版）PDF版

    6.11 垂直居中 6.12 折叠标签 6.13 CSS数据图表 6.13.1 初级样式(进度条) 6.13.2 复合样式(滑动条) 6.13.3 柱状图 6.14 切换样式表(网站换肤) 6.15 XHTML与CSS校验 6.15.1 XHTML校验器 6.15.2 CSS校验器 6.16 Flash...

    《程序天下：JavaScript实例自学手册》光盘源码

    5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...

    程序天下:JavaScript实例自学手册

    5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...

Magicbox
Global site tag (gtag.js) - Google Analytics