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%;
}