如何居中div的内容 [英] How to center the contents of a div

问题描述

我有一个非常简单的问题，但我似乎无法解决它。我有一个表里面的div，这是主要元素。现在我有一个td标签里面的宽度和高度设置为iphone屏幕尺寸的。现在我基本上想要使其td单元格在div标签中央的那个表，以便'屏幕'将在任何浏览器窗口中心。

I have a very simple problem, but I can't seem to solve it. I have a table inside a div, which is the main element. Now I have a td tag inside the table with a width and hight set to that of an iphone screen size. Now I basically want to center that table with its td cell within the div tag, so that the 'screen' will be centered in any browser window. How do I do that?

用表替换div解决了我的问题，但我想使用div。

Replacing that div with a table solved my problem, but I would like to use a div instead.

谢谢

推荐答案

尝试这个，我做这个代码 - 演示这里，很容易和简单的代码（我使用了一个黑客代码和额外的span标签只有IE旧版本）
< a href =http://jsfiddle.net/ERuX4/1/ =nofollow> http://jsfiddle.net/ERuX4/1/

Try this one , I do this code - Demo here, Very easy and simple code ( I have used a hack code and extra span tag for only IE old version) http://jsfiddle.net/ERuX4/1/

<div class="demo wraptocenter">
   <span></span>
   <img src="http://www.spitzer.caltech.edu/images/twitter.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;}

这篇关于如何居中div的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！