html - 在框内居中图像，内容如下

Question

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

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

我怎样才能漂浮<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%;
}