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.
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.
laisse moi dire quelques mots