CSS Responsive center Div
je voudrais centrer quelque div qui a l'image de fond. Il y a un problème avec la réponse de cette div, parce que si je mets la largeur sur 80% et la hauteur sur 80% le bg-image n'est pas au centre. J'ai tout essayé, mais l'image ne peut pas rester au centre et si le navigateur est plus petit ou plus grand, c'est un gros problème.
donc si vous regardez l'image
je veux faire ce bloc blanc sensible.
il y a un peu de css que j'ai déjà écrit, mais pour l'instant n'est pas responsive:
top: 20%;
left: 30%;
display: block;
position: absolute;
background: url(images/background.png) no-repeat;
background-size: 750px 417px;
width: 750px;
height: 417px;
6 réponses
je voulais faire la même chose il y a 2 ans, il y a la solution:
parce que vous voulez qu'il réponde, vous pouvez utiliser la fonction @media
dans 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 */
}
}
Le max-width
que vous utilisez est la largeur maximale de l'écran de l'appareil. Il suffit de le copier et de changer le width, height, margin-left and margin-top
pour l'image. Vous devez aussi changer l'étiquette background
!
il centrera l'image sur la page.
vous pouvez voir un exemple à: Créations MicroWeb - Carrières . L'image est totalement centrée même si vous changez le côté de la fenêtre.
vous pouvez ajouter overflow: hidden;
sur le body
pour rendre la page non contrôlable lorsque la résolution est trop faible. Comme je l'ai fait.
EDIT : JSFiddle
Essayez avec auto des marges et de l'affichage de la table:
.your-class {
margin-left: auto;
margin-right: auto;
display: table;
}
s'il vous Plaît essayez ce qui suit:
img { max-width:100%; max-height:100%; margin:auto; }
vous pouvez utiliser margin:0 auto;
pour centrer un div horizontalement aussi longtemps que sa largeur est inférieure à celle du Div conteneur.
vous pouvez utiliser CSS transform:
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
j'ai utilisé display: inline-block;
sur element to center et text-align: center;
sur parent div.