如何集中一个div的内容

我有一个非常简单的问题,但我似乎无法解决它。 我有一个div里面的表格,这是主要元素。 现在我有一个宽度和高度设置为iPhone屏幕大小的表内的TD标记。 现在我基本上想要把它的td单元格放在div标签中间,这样'screen'就会在任何浏览器窗口中居中。 我怎么做?

用表replace该div解决了我的问题,但我想用div来代替。

谢谢

5 Solutions collect form web for “如何集中一个div的内容”

试试这一个,我做这个代码 – 这里演示 ,非常简单和简单的代码(我已经使用黑客代码和额外的跨标签只有IE旧版本) http://jsfiddle.net/ERuX4/1/

 <div class="demo wraptocenter"> <span></span> <img src="http://www.spitzer.caltech.eduhttp://img.dovov.comtwitter.png?1295473781" alt="" /> </div> 

CSS

 .wraptocenter * { vertical-align: middle; } .wraptocenter span { display: inline-block; height: 100%; width: 1px; } .wraptocenter { display: table-cell; text-align: center; vertical-align: middle; } /*End wraptocenter - image Vcenter patch styles*/ .demo { width:100px; height:100px; border:1px solid red; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px;} 
 <style type="text/css"> .outer { width:800px; height:640px; } .inner { position:relative; top:50%; left:50%; width: 320px; margin-left: -160px; /* half the width */ height: 240px; margin-top: -120px; /* half the height */ </style> <div class="outer"> <div class="inner">I'm centered!</div> </div> 

HTML

  <div class="img_thumb"> <table> <tr><td>adfasfdasf</td></tr> <tr><td>adfasfdasf</td></tr> <tr><td>adfasfdasf</td></tr> <tr><td>adfasfdasf</td></tr> <tr><td>adfasfdasf</td></tr> </table> </div> 

CSS

 .img_thumb { background: none repeat scroll 0 0 red; display: table-cell; height: 200px; vertical-align: middle; width: 200px; } table { border: 1px solid; width: 100px; margin:auto; } 

或看演示: – http://jsfiddle.net/QHEnL/16/

尝试这个:

 div#centerlayout { position:absolute; left:50%; top:50%; height:XXXpx; width:XXXpx; margin-top:-XXXpx; margin-left:-XXXpx; } 

我还没有在IE浏览器中testing(在FF和Safari中工作),但是如果你使用的是jQuery,你可以使用这个在页面中的类page中心div:

 var pageMargin = ($(document).width() - $("div.page").width()) / 2; $("div.page").css("margin-left", pageMargin).css("margin-right", pageMargin); 
  • 用Java剥离HTML标签
  • jQuery从下拉菜单中select选项
  • <nav>或<menu>(HTML5)
  • 如何在PHP中正确地转义html表单input默认值?
  • 为什么不包含浮动元素的容器元素的高度增加?
  • 使用jQuery调整表格列
  • 如何从无序列表项中删除缩进?
  • 使用自定义HTML标签
  • 使身体有100%的浏览器高度
  • 什么是&#xA; 字符?
  • 如何在DOM中删除图像时防止内存泄漏?