HTML5 - centre d'alignement img ne fonctionne pas

Question

J'essaie d'aligner ma photo de profil au milieu de ma page Web, mais je n'arrive pas à la faire fonctionner. J'ai tenté à la fois align = "middle" & float méthodes mais il refuse toujours de quitter le côté gauche.

Le code que j'ai tenté d'utiliser (HTML5) est

<header> 
     <h1> Luke Johnson Portfolio</h1> 

     <div class="image-cropper" style="text-align"> 
      <img src="lukeprofile.jpg" align="center" alt="Luke Profile Pic" class="rounded" /> 

     </div> 
</header> 

Toute aide serait appréciée, je vous remercie.

Answer 1

align L'attribut de l'image l'aligne relativement au texte ou à d'autres images sur la page Web (pour plus d'informations: https://www.w3schools.com/tags/att_img_align.asp).

Et remarquez (info de W3Schools):

"L'attribut align de n'est pas pris en charge dans HTML5 Utilisez CSS à la place."

Donc align attribut ne fera pas l'affaire dans votre cas, vous pouvez centrer l'image en utilisant:

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

à la place. Voici un exemple:

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

<header> 
 
    <h1> Luke Johnson Portfolio</h1> 
 
    <div class="image-cropper" style="text-align"> 
 
    <img src="https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png" alt="Luke Profile Pic" class="rounded" /> 
 
    </div> 
 
</header>

Answer 2

Vous avez mal utilisé la balise de style en ligne, l'utilisation correcte serait comme suit:

<div class="image-cropper" style="text-align: center"> <img src="lukeprofile.jpg" alt="Luke Profile Pic" class="rounded" /> </div>

je pourrais vous aider plus si je devais l'URL du site Web.

Answer 3

Notes de compatibilité L'attribut align de la balise img est pas prise en charge HTML5. Utilisez CSS à la place. Pour l'image à aligner milieu, haut ou bas, utilisez la propriété CSS.