如何将项目置于DIV内部

Question

请在这里看到我的小提琴：http://jsfiddle.net/nobosh/kABaJ/

我的问题是，在#Frame里面我有一个#previewItem里面的图像，我怎样才能得到#previewItem，里面的图像在#frame的一边水平和垂直居中，不管#frame的尺寸是多少？使用CSS，没有JS。

由于

Answer 1

我会在这里看一下，因为它似乎很好地回答了你的问题。

不是最优雅的解决方案，但确实有效：

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

编辑：水平居中可以通过将父div的宽度设置为100％并使用“text-align：center”定义，或通过自动边距来完成。

Answer 2

在该示例中，内部div也具有帧的id。将其更新为previewItem并在#previewItem下添加text-align:center;应该是水平对齐。

在IE6（和7？）中，垂直对齐更难设置和硬盘。但是，如果您知道内部div（previewItem）的大小，那么您可以使用此代码段轻松设置对齐内部div：

top: 50%;
left: 50%;
width: x em;
height:y em;
margin-top: -x/2 em; /*set to a negative number 1/2 of your height*/
margin-left: -y/2 em; /*set to a negative number 1/2 of your width*/

并且只是在x和y

的适当值中

Answer 3

#frame{
    display:table;
}


#previewItem{
    display: table-cell;
    vertical-align: middle; //centers vertically
    margin: 0px auto; //centers horizontally
}