5545 sujets

Sémantique web et HTML

AIDE HTML

Bonjour,

Je suis bloqué sur un code pour mettre juste une image sur mon site centré:
<center>
<img src="Site/PhotoKris.jpg" alt="Photo Kris" width="200" height="200"/>
</center>

je ne vois pas sur quoi je buche.
Merci pour votre aide.

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css"/>
<title>Blog Cv Christelle Gamiette</title>
</head>
<body>
<h1>Bienvenu sur la présentation de mon cv !</h1>
<h2><center>Christelle Gamiette</center></br></h2>
<h3><center>Opératrice PréPress PAO / CTP</center></br><center>Retouches Photos / Chromiste</center></h3>
<center>
<img src="Site/PhotoKris.jpg" alt="Photo Kris" width="200" height="200"/>
</center>
</body>
</html
Bonsoir,

Vous ne nous avez pas donné le CSS mais bon... sachez aussi que les balises <center>, bien qu'encore supportées par les navigateurs, sont obsolètes depuis plusieurs années déjà.

Bref, pour votre image, vous pourriez faire simplement :
img {
  margin: 0 auto;
}

Mais cela impactera toutes les images de votre site, il vaudrait mieux mettre une classe sur cette image et cibler cette classe en CSS.
Il me semble, pour que les margin: auto fonctionnent, qu'il faut spécifier la largeur de l'image. Mais en HTML ou en CSS ?
Modifié par thierry (21 Nov 2017 - 20:50)
Les images ont des rendus inline-block par défaut donc il faut d'abord lui mettre un display:block si on veut utiliser les margin:auto.
Dans l'autre cas, il faudrait appliquer un text-align:center au parent mais là en l'occurrence c'est le <body> et il impactera toute la page.

EDIT: joyeux anniversaire Olivier C
Modifié par Zelalsan (21 Nov 2017 - 21:43)
Zelalsan a écrit :
Les images ont des rendus inline-block par défaut donc il faut d'abord lui mettre un display:block si on veut utiliser les margin:auto.

Effectivement, j'ai tellement l'habitude de mettre cette règle par défaut sur mes images que j'oublie de le préciser.
Zelalsan a écrit :
joyeux anniversaire Olivier C

Merci !
Bonjour,

Merci pour vos réponse, alors je n'ai pas attribuer de Css à cette image, je vais analyser tout ca, mais vraiment je viens de commencer, normalement je commence une formation début février, j'aimerais avancer un max,
par contre sur la balise <center> comment centrer son texte ou son image.
Merci à vous

h1
{
color: #FFFFFF;
}
h2
{
color: #BDB76B;
border-top: 1px White solid;
border-bottom: 1px White solid;
}
h3
{
color: #BDB76B
}
body
{
background-color: #00FF80
}
Bonjour.

Zelalsan a écrit :
Les images ont des rendus inline-block par défaut donc il faut d'abord lui mettre un display:block si on veut utiliser les margin:auto.

Je dirais plutôt que les images sont des 'éléments remplacés' et ont, par conséquent, des dimensions intrinsèques qui n'ont pas besoin d'être spécifiées par des règles CSS.

Smiley smile
Sujet clos
Aller à