CSS Responsive Centre Div

J'aimerais centre de certains div qui a pour arrière-plan de l'image. Il y a un problème avec la réponse de cette div, parce que si j'ai mis en largeur sur 80% et à hauteur de 80%, le bg-image n'est pas au centre. J'ai tout essayé, mais l'image ne peut pas juste se tenir debout sur le centre et si le navigateur est plus grande ou plus petite c'est très gros problème.

Donc, si vous regardez la photo

CSS Responsive Centre Div

Je veux faire de ce blanc, bloc de réactif.

Il y a un peu de css qui je l'ai déjà écrit, mais pour l'instant, est non-réactif:

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

OriginalL'auteur user1257255 | 2012-09-28

  1. 10

    J'ai voulu faire la même chose il y a 2 ans, il y a la solution:

    Parce que vous voulez répondre, vous pouvez utiliser le @media fonction en CSS3. Comme ceci:

    @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 */
    }
}

    La max-width que vous utilisez est la largeur maximale de l'écran de l'appareil. Vous venez de le copier et de modifier le width, height, margin-left and margin-top pour l'image. Aussi, vous devez modifier le background tag!

    Il va centrer l'image sur la page.

    Vous pouvez voir un exemple: Créations MicroWeb - Carrières. L'image est totalement centré même si vous modifiez la fenêtre de côté.

    Vous pouvez ajouter overflow: hidden; sur le body pour faire de la page unscrollable lorsque la résolution est trop faible. Comme je l'ai fait.

    MODIFIER: JSFiddle

    Mais comment faire pour qu'elle responsable? jsfiddle.net/jZKyE
    Sensible comme Bootstrap? Que le fond de redimensionner avec l'écran de l'appareil?
    Oui, si quelqu'un ont un plus petit écran pour afficher plus petite image d'arrière-plan et si quelqu'un d'avoir le plus grand écran pour montrer à elle seule toute la largeur/hauteur de l'image et rien de plus.
    J'ai édité la réponse.
    La div est vraiment centré maintenant, mais il y a encore de problème avec une réponse. Si j'ai mis max-width, cela signifie que div disparaîtra si quelqu'un avec un trop grand écran à ouvrir ce site. J'ai besoin de faire plus petite image quand quelqu'un avec un petit écran de visiter mon site, mais je ne sais pas comment faire. Ai-je besoin de JavaScript pour vérifier la largeur et la hauteur de son navigateur?

    OriginalL'auteur Frederick Marcoux

  2. 5

    Essayer avec auto marges et affichées sous forme de tableau:

    .your-class {
  margin-left: auto;
  margin-right: auto;
  display: table;
}
    Qu'est-ce que la théorie derrière tout cela?

    OriginalL'auteur monteirobrena

  3. 2

    Veuillez essayer ceci:

    img { max-width:100%; max-height:100%; margin:auto; }

    OriginalL'auteur suresh.g

  4. 2

    Vous pouvez utiliser CSS transform:

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

    OriginalL'auteur Steve Glick

  5. 1

    Vous pouvez utiliser margin:0 auto; pour centrer une div horizontalement aussi long que sa largeur est inférieure à celle de la div conteneur.

    oui, mais la div doit être absolue positionné, donc ce n'est pas une option.

    OriginalL'auteur thatidiotguy

  6. 0

    J'ai utilisé display: inline-block; sur l'élément du centre et text-align: center; sur la div parent.

    OriginalL'auteur kravits88