J'utilise Polo - Modèle HTML5 polyvalent et réactif. Je ne peux pas centrer mon objet
J'ai essayé de nombreuses solutions, et rien ne fonctionne pour moi encore sur le côté gauche.
Voir capture d'écran
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
</div>
3 Réponses :
Ajoutez le CSS ci-dessous pour aligner l'image au centre
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/600x400" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="images/mockup/1.jpg" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
img {
margin-left: 50%;
transform: translateX(-50%);
}
Cela centrerait l'image dans le div mais cela ne résoudrait pas le problème que tout le div est à gauche.
@ Daut, il n'a jamais mentionné qu'il voulait tout le div au centre. avant de voter, vous devriez lire la question en premier. Il a seulement dit objet et l'objet pouvait tout me faire. alors s'il vous plaît, faites-le 0.
Modifiez votre réponse pour dire que, si vous donnez une solution particulière expliquez-la :)
au lieu de
procéder à ce qui suit:
pourriez-vous fournir un violon JS avec votre problème et donner plus de données au lieu de simplement voter une réponse !?
Je ne pense pas que faire le div pleine largeur fasse une différence d'autant plus qu'il ne contient qu'une seule colonne qu'il veut centrer. Au moins avec ma solution, vous n'avez pas besoin d'ajouter des classes supplémentaires contrairement aux vôtres pour prendre en charge les écrans mobiles. Beaucoup plus lisible et compréhensible aussi!
.Text-Center est la classe bootstrap qui centrifiera l'image par rapport à la colonne
.col-md-12 impliquera qu'il n'y a qu'une colonne dans toute la ligne
2 commentaires
Ce n'est pas la seule solution, c'est une suggestion :)
Vous pouvez simplement utiliser la classe offset-md-4 combinée avec text-center et cela devrait fonctionner.
Pensez également au mobile. J'ai ajouté offset-2 et col-8 pour m'assurer qu'il a l'air bien sur petit écran également.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="hr-title hr-long center">
<abbr>Single image lightbox</abbr>
</div>
<div class="container">
<div class="row col-no-margin">
<div class="offset-2 col-8 offset-md-4 col-md-4 text-center">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /></div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
img {
max-width: 100%;
margin: auto;
display: block;
}
Merci Monsieur, vous avez sauvé ma journée :)
Copie possible de Comment puis-je centrer une image dans Bootstrap?
NE PAS publier d'images de code, de données, de messages d'erreur, etc. - copiez ou saisissez le texte dans la question. Comment demander