HTML Centrer verticalement du texte avec un logo

Fermé
camille - 18 mars 2022 à 11:33
 G.D.Bord - 19 mars 2022 à 05:53
Bonjour
Je souhaiterais centrer un texte verticale avec un logo.

J'ai commencé le code mais il ne fonctionne pas :

Code :
<font size="3"></font><p><span style="font-family: Verdana;"><font size="3">Décrivez ici <strong>trois réalisations</strong>, au sein du groupe ou en dehors, qui ont marqué votre parcours et que vous pensez réussies.
<br>
<br>
<i>
</i></font></span></p><div><span style="font-family: Verdana;"><i>
<font size="2"><img style="vertical-align:middle" src="/clientimg/groupeavril/welcome/2022_CDC_PICTO-AMPOULE.png" alt=""> Si besoin, copiez/collez l'historique proposé pour qu'il reste disponible l'année prochaine.</font></i></span></div>

Résultat :
Ma ligne de texte est toujours en bas de mon image. comment puis je faire pour la centrer ?

Merci

Cordialement.
Camille
A voir également:

1 réponse

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
18 mars 2022 à 19:42
Bonjour,

A priori ton extrait de code avec vertical-align: middle semble fonctionner : https://jsfiddle.net/fjsdm7ak/
Fait un copier/coller de tout ton code html dans le validateur w3c pour voir si tu n'as pas des erreurs : https://validator.w3.org/#validate_by_input

Quelques remarques au passage :
- la balise <font> est obsolète et ne devrait plus être utilisée
- préfère l'utilisation de classe css avec un fichier css externe plutôt que d'utiliser l'attribut style
https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps/Getting_started
- évite d'imbriquer plusieurs balises html si tu peux en utiliser qu'une seule avec une classe css. Par exemple, la suite <div><span style="font-family: Verdana;"><i><font size="2">... peut être remplacée par une seule balise avec une classe css : https://jsfiddle.net/fjsdm7ak/1/
0
Salut,
il y a aussi une erreur de code donc ça ne peut pas marcher.

Une règle/propriété CSS doit se terminer par un point virgule:
SELECTEURCSS{
NOMDELAREGLE : VALEUR(S) ;
}

Ou dans l'attribut style de la balise uniquement la(les) règle(s) à appliquer puisqu'il n'y a pas besoin de sélecteur mais ça dispense pas de l'écrire sans faute en terminant chaque propriété par ";".

Dans votre code pas de point virgule donc ça génère une erreur car le programme qui lit la règle à appliquer pour le CSS dans la page ne sais pas quand la propriété est finie ce qui en quelque sorte lui donne le signal qu'il peut utiliser la valeur indiquée.

Là sur une image vous alignez rien du tout puisqu'une image ne contient rien à part elle même(c'est d'ailleurs une balise dite auto-fermante qui se passe du duo de balises ouverture et /fermeture.

Comme dit Pitet (entre autes bonnes recommandations) il ne faut pas utiliser la balise <font>, en fait TOUTE la mise en page DOIT se faire en CSS.
Même chose donc pour les balises <i> comme <strong> elles ne doivent plus être utilisées.
En fait pour strong elle sert à autre chose et indiquer un texte important plutôt que des caractères gras.

Pour mettre en italique c'est la propriété CSS:
font-style:italic;

En caractère gras:
font-weight:bold;


Le mieux s i vous n'avez pas un bouquin avec toutes les règles CSS sous la main c'est de regarder la doc du W3C(éditeur des normes web) qui contient explication complètes et exemples à manipuler:

https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

ps: vos balises span ne servent à rien pour la première et pour la seconde devrait être un p si vous indiquez un contenu texte.
ps2: plus une optimisation qu'une erreur mais quand je parle(c'est pas moi qui l'ai inventé mais fait partie des normes du web) de faire toute la mise en page CSS il faut donc éviter les balises BR pour écrire du bon code(en le faisant en CSS) qui est facile à pouvoir modifier, surtout si c'est pour plusieurs saut de lignes on peut gérer les interlignes, éventuellement inclure une balise span dans un P pour une seule interligne et modifier la marge haute/ou basse selon que le span est sur la partie après ou avant le(s) saut(s) de ligne(s) .
C'est même une bonne habitude en bureautique(genre avec word) ou de toute édition de publication comme pour un journal. C'est plus simple à modifier par la suite et n'oblige pas à afficher les caractères cachés(n i devoir en effacer/ajouter plusieurs pour modifier la mise en page) et sera plus souple à utiliser + aussi gain de temps et de clarté du code/publication.
0