Centrer l'image horizontalement dans un div

Jacob Windsor

C'est probablement une question stupide, mais comme les méthodes habituelles d'alignement au centre d'une image ne fonctionnent pas, j'ai pensé que je demanderais. Comment puis-je centrer (horizontalement) une image à l'intérieur de son conteneur div?

Voici le HTML et le CSS. J'ai également inclus le CSS pour les autres éléments de la vignette. Il fonctionne dans l'ordre décroissant de sorte que l'élément le plus élevé est le conteneur de tout et le plus bas est à l'intérieur de tout.

#thumbnailwrapper {
      color: #2A2A2A;
      margin-right: 5px;
      border-radius: 0.2em;
      margin-bottom: 5px;
      background-color: #E9F7FE;
      padding: 5px;
      border: thin solid #DADADA;
      font-size: 15px
}
    
#artiststhumbnail {
      width: 120px;
      height: 108px;
      overflow: hidden;
      border: thin solid #DADADA;
      background-color: white;
}
    
#artiststhumbnail:hover {
      left: 50px
}
<!--link here-->

<a href="NotByDesign">
  <div id="thumbnailwrapper">

    <a href="NotByDesign">

      <!--name here-->
      <b>Not By Design</b>
      <br>

      <div id="artiststhumbnail">

        <a href="NotByDesign">

          <!--image here-->
          <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
        </a>
      </div>

      <div id="genre">Punk</div>

  </div>

D'accord, j'ai ajouté le balisage sans PHP, donc cela devrait être plus facile à voir. Aucune des deux solutions ne semble fonctionner dans la pratique. Le texte en haut et en bas ne peut pas être centré et l'image doit être centrée dans son conteneur div. Le conteneur a un débordement masqué, donc je veux voir le centre de l'image car c'est normalement là que se trouve le focus.

Marvo

Le CSS Guy suggère ce qui suit:

Donc, en traduisant, peut-être:

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

Voici ma solution sur: http://jsfiddle.net/marvo/3k3CC/2/

Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.

En cas d'infraction, veuillez [email protected] Supprimer.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

TOP liste

  1. 1

    Comment exécuter un fichier python avec des droits d'administrateur dans pycharm

  2. 2

    obtenir le nombre de marqueur affiché sur la carte

  3. 3

    comment obtenir un objet de requête dans les tests unitaires de django?

  4. 4

    Microsoft.WebApplication.targets

  5. 5

    Comment ajouter un texte dans un texte Python/Tkinter

  6. 6

    comment convertir une chaîne en un tuple dateutil jour de la semaine sans utiliser eval

  7. 7

    mongo kafka connect source

  8. 8

    Comment obtenir l'intégration contextuelle d'une phrase dans une phrase à l'aide de BERT ?

  9. 9

    Dans les modèles Hugo, comment vérifier la longueur du tableau de fichiers JSON?

  10. 10

    Référencement des assemblys de structure .net 4.7 dans la solution .net core 2

  11. 11

    Comment obtenir tous les champs d'un objet (y compris sa superclasse), à l'aide de l'API Mirrors de Dart?

  12. 12

    Exécuter la requête externe pour chaque date obtenue à partir de la requête interne

  13. 13

    Recherche de dicton Jinja2 à l'aide d'une clé variable

  14. 14

    Laravel 8: Attempt to read property "id" on null

  15. 15

    définir une propriété pour chaque nœud dans neo4j

  16. 16

    Vérifier la longueur du nombre à partir du message, puis utiliser la valeur dans l'instruction

  17. 17

    Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?

  18. 18

    Aide de variable de débogage pprint jinja2

  19. 19

    Impossible d'accéder à la vue personnalisée pendant le test de l'interface utilisateur dans XCode

  20. 20

    Impression de la longueur du chemin le plus court dans le labyrinthe

  21. 21

    Algorithme: diviser de manière optimale une chaîne en 3 sous-chaînes

chaudétiquette

Archive