web-dev-qa-db-ja.com

CSSレスポンシブセンターDiv

背景画像のあるdivを中央に配置したいと思います。幅を80％、高さを80％に設定すると、bg-imageが中央に表示されないため、このdivの応答に問題があります。私はすべてを試しましたが、画像が中央に立つだけではなく、ブラウザが小さいか大きい場合、これは非常に大きな問題です。

だからあなたが写真を見れば

block on center

この白いブロックをレスポンシブにしたい。

私がすでに書いたcssが少しありますが、今のところ応答しません：

top: 20%;
left: 30%;
display: block;
position: absolute;
background: url(images/background.png) no-repeat;
background-size: 750px 417px;
width: 750px;
height: 417px;
csshtmlbackgroundcenter
4
user1257255

私は2年前に同じことをしたかったのですが、解決策があります。

応答性が必要なため、CSS3の@media関数を使用できます。このような：

@media (max-width: 480px) {
    #div {
        top: 50%; /* IMPORTANT */
        left: 50%; /* IMPORTANT */
        display: block;
        position: absolute;
        background: url(images/background.png) no-repeat center center;
        width: 750px;
        height: 417px;

        margin-top: -208.5px; /* HALF OF THE HEIGHT */
        margin-left: -375px; /* HALF OF THE WIDTH */
    }
}

使用するmax-widthは、デバイス画面の最大幅です。それをコピーして、画像のwidth, height, margin-left and margin-topを変更するだけです。また、backgroundタグを変更する必要があります！

画像をページの中央に配置します。

例は次の場所にあります： CréationsMicroWeb--Carrières 。ウィンドウ側を変更しても、画像は完全に中央に配置されます。

bodyにoverflow: hidden;を追加して、解像度が低すぎる場合にページをスクロールできないようにすることができます。私がしたように。

[〜＃〜]編集[〜＃〜]： JSFiddle

11
Frederick Marcoux

自動マージンを試して、表として表示します。

.your-class {
  margin-left: auto;
  margin-right: auto;
  display: table;
}
7
monteirobrena

CSS変換を使用できます。

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
7
Steve Glick

これを試してください：

img { max-width:100%; max-height:100%; margin:auto; }
2
suresh.g

margin:0 auto;を使用して、divの幅がコンテナdivの幅よりも小さい限り、divを水平方向に中央揃えにすることができます。

1
thatidiotguy

利用した display: inline-block;要素を中央に配置しtext-align: center;親div。

1
kravits88