J’utilise le framework bootstrap et essaye d’obtenir une image centrée horizontalement sans succès.
J’ai essayé différentes techniques telles que la division du système de 12 grids en trois blocs égaux, par exemple
Quelle est la méthode la plus simple pour centrer une image par rapport à la page?
Twitter Bootstrap v3.0.3 a une classe: bloc central
Centrer les blocs de contenu
Définir un élément à afficher: bloquer et centrer via la marge. Disponible en mixin et en classe.
Il suffit d’append une classe “center-block” dans la balise img, ressemble à ceci
Dans Bootstrap, a déjà un appel de style css .center-block
.center-block { display: block; margin-left: auto; margin-right: auto; }
Vous pouvez voir un échantillon d’ ici
La manière correcte de le faire est
Ajouter un “bloc central” à l’image en tant que classe – pas besoin de CSS supplémentaire
Le bootstrap de Twitter a une classe centrée sur:
Cela a fonctionné pour moi de faire:
Le css pour la classe est:
.pagination-centered { text-align: center; }
Mise à jour 2018
La classe de center-block
n’existe plus dans Bootstrap 4 . Pour centrer une image dans Bootstrap 4, utilisez mx-auto d-block
https://stackoverflow.com/questions/10879955/how-to-align-an-image-dead-center-with-bootstrap/…
Vous pouvez utiliser les éléments suivants. Il supporte Bootstrap 3.x ci-dessus.
En supposant qu’il n’y ait rien d’autre à côté de l’image, le meilleur moyen est d’utiliser text-align: center
dans le parent img
:
.row .span4 { text-align: center; }
modifier
Comme mentionné dans les autres réponses, vous pouvez append la classe CSS .text-center
de bootstrap à l’élément parent. Cela fait exactement la même chose et est disponible à la fois dans v2.3.3 et v3
Travaille pour moi. essayez d’utiliser le center-block
J’ai besoin de la même chose et ici j’ai trouvé la solution:
https://stackoverflow.com/a/15084576/1140407
This div will be centred.
et à CSS:
[class*="span"].centred { margin-left: auto; margin-right: auto; float: none; }
Semble que nous pourrions utiliser une nouvelle fonctionnalité HTML5 si la version du navigateur ne pose pas de problème:
dans les fichiers HTML:
I will be in the center
Et en fichier CSS, on écrit:
body .loadingDiv { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Et donc le div pourrait être parfaitement au centre du navigateur.
Vous pouvez utiliser la propriété margin avec la classe bootstrap img.
.name-of-class .img-responsive { margin: 0 auto; }
Tu devrais utiliser
.fluid-img { margin: 60px auto; } @media( min-width: 768px ){ .fluid-img { max-width: 768px; } } @media screen and (min-width: 768px) { .fluid-img { padding-left: 0; padding-right: 0; } }
J’utilise la classe justify-content-center
avec une ligne dans un conteneur. Fonctionne bien avec Bootstrap 4.
J’ai créé ceci et ajouté à Site.css.
.img-responsive-center { display: block; height: auto; max-width: 100%; margin-left:auto; margin-right:auto; }
Vous pouvez changer le CSS de la solution précédente comme ci-dessous:
.container, .row { text-align: center; }
Cela devrait également centrer tous les éléments du div
parent.