将图像置于包含以下内容的框内

Question

我正在构建这个盒子，女巫必须要有回应。但是低于768px分辨率的图像具有相同的分辨率。

我可以将图像居中（在这个例子中只是一个正方形），但我想要下面的内容，但是使用这种方法，将{position：absolute}添加到<img>（例如div）{{1}元素也是绝对的......

如何在图片下方浮动<p>？

jsfiddle

Answer 1

请改用此css：

.container-center > div {
    width: 270px;
    height: 188px;
    background-color: green;
    /*Centering*/
    margin: 0px auto;
}

http://jsfiddle.net/SmBXR/1/

Answer 2

试试这个。这将使文本在绿框下方居中。

.container {
border: 1px solid black;
}

.container p {
position: relative;
margin: 0px auto;
text-align:center;
}

.container-center > div {
width: 270px;
height: 188px;
background-color: green;
position: relative;
/*Centering*/
margin: 0px 0 0 -135px;
left: 50%;
}