私は現在このボックスを構築しています。魔女は応答する必要があります。ただし、解像度が 768px 以下の画像は同じ解像度です。
画像を中央に配置できます(この例では単なる正方形です)が、以下のコンテンツが必要ですが、この方法では position: absolute を<img>
(例: div) に追加すると、<p>
要素も絶対になります..
<p>
画像の下に浮かせるにはどうすればよいですか?
代わりに次の css を使用してください。
.container-center > div {
width: 270px;
height: 188px;
background-color: green;
/*Centering*/
margin: 0px auto;
}
これを試して。これにより、テキストが緑色のボックスの下の中央に配置されます。
.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%;
}