HTML + CSS - Centrage des images avec des liens hypertexte

-1

J'ai donc deux images avec des hyperliens et quand j'essaie de les centrer, elles agissent bizarrement alors j'ai pensé que oui, peut-être que les dimensions des éléments sont ... déformées? En quelque sorte? J'ajoute donc une bordure autour des éléments et bien sûr, les tailles d'entre eux ressemblent à ceci:HTML + CSS - Centrage des images avec des liens hypertexte

https://gyazo.com/f5a91e1a26eaf3aea6208ffa2eea698c

HTML:

<a id="home-invite-button" href="https://url.com" target="_blank"><img 
src="Images/Invite Button.png"></a> 
<a id="home-wiki-button" href="https://url.com" target="_blank"><img 
src="Images/Wiki Button.png"></a>

CSS:

#home-invite-button { 
    position: absolute; 
    top: 540px; 
    left: 0px; 
    right: 0px; 
    margin: 0px auto; 
    width: 50%; 
    border: thin black solid; 
} 

#home-wiki-button { 
    position: absolute; 
    top: 630px; 
    left: 0px; 
    right: 0px; 
    margin: 0px auto; 
    width: 50%; 
    border: thin black solid; 
}

La question est, comment puis-je faire la taille réelle des éléments la même que l'image réelle? Merci beaucoup!

Source

2017-10-21 APixel Visuals

Évitez d'affecter la largeur de vos images, au lieu d'emballer les <a> balises dans un div content-holder puis appliquez le positionnement au détenteur. Les images resteront intactes.

Jetez un oeil à l'extrait ci-dessous:

.content-holder { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    border: thin black solid; 
 
} 
 

 
#home-invite-button { 
 
    display: flex; 
 
    border: 1px solid red; 
 
} 
 

 
#home-wiki-button { 
 
    display: flex; 
 
    border: 1px solid red; 
 
}

<div class="content-holder"> 
 
    <a id="home-invite-button" href="https://url.com" target="_blank"><img 
 
    src="http://placehold.it/100x100"></a> 
 
    <a id="home-wiki-button" href="https://url.com" target="_blank"><img 
 
    src="http://placehold.it/100x100"></a> 
 
</div>

Hope this est ce que vous essayez d'atteindre.

Source

2017-10-21 05:08:01

Merci beaucoup, cela a fonctionné! J'ai aussi appris que la largeur n'est pas vraiment le chemin à parcourir. Dans l'ensemble, bonne réponse :) –

C'est mon plaisir. S'il vous plaît également upvote, si vous trouvez cette réponse utile. –

hehe ouais j'ai besoin de 15 rep en premier: P –

vous pouvez essayer ce code

a img { 
    display: block; 
    margin: 0 auto; 

}

si vous voyez aussi ce lien: JSfiddle

Source

2017-10-21 05:04:39

J'ai essayé cela tout à l'heure et cela ne résout pas le problème. –

Lorsque Centrez votre lien puis Assurez-vous de votre exemple Wrapper liens: https://jsfiddle.net/sayed021/tpnoztx6/1/ –

HTML + CSS - Centrage des images avec des liens hypertexte

Répondre

Questions connexes