Aligner texte et image

**djibril** · 06/03/2012, 22h06

Salut,

Comment faire pour aligner le texte à coté de l'image car pour l'instant, l'image se positionne en dessous.

Voici le code HTML testé.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE HTML>
<html>
  <head>
  <title>texte et image</title>
  </head>
  <body>
 
<p>Voici une image dans le texte : <figure><img src="test.gif" alt="texte alt" style="vertical-align: middle"/></figure> avec la balise image.</p>
 
<p>Voici une image dans le texte : <figure style="float:left"><img src="test.gif" alt="texte alt" style="vertical-align: middle"/></figure> avec la balise image.</p>
  </body>
</html>

**djibril** · 07/03/2012, 10h19

L'affichage est correct sous IE8, mais pas sous FF 10.0.2, ni sous chrome.

Une idée ?

**NoSmoking** · 07/03/2012, 14h33

Bonjour,

L'affichage est correct sous IE8, mais pas sous FF 10.0.2, ni sous chrome.

je dirais que c'est l'inverse

La balise FIGURE, issue du HTML5, n'est pas reconnue par certains navigateurs et notamment IE8, de ce fait ils traitent celle ci comme une balise personnalisée, un simple SPAN par exemple.

Lorsqu'elle est reconnue elle est traitée comme une balise de type block et comme les DIV passe à la ligne, c'est une balise de contenu.

Elle sert surtout à regrouper des images/videos d'un même thèmes à laquelle ont peut mettre une légende via la balise FIGURECAPTION.

Dans le cas que tu nous montres elle n'apporte rien au document et tu pourrais tout simplement écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<p>Voici une image dans le texte : <img src="test.gif" alt="texte alt" style="vertical-align: middle"/> avec la balise image.</p>

et le tour est joué.

**djibril** · 07/03/2012, 14h53

Je savais que ça fonctionnait sans balise <figure>, mais comme je souhaite respecter la sémantique

.
Donc pour toi, du moment où l'on ne souhaite pas utiliser de légende à une image, il est inutile d'utiliser la balise <figure> et la sémantique est respectée, sûr ?

**NoSmoking** · 07/03/2012, 15h45

Donc pour toi, du moment où l'on ne souhaite pas utiliser de légende à une image,...

non la légende n'étant pas obligatoire, je dirais que cette balise est plus un conteneur et n'est pas forcément dans le flux du document, au même titre que l'on regroupe une série de photos dans une DIV.

Concernant la sémantique de la balise IMG je ne vois pas de soucis, ton cas est même repris très largement dans la spécification http://developers.whatwg.org/embedde...he-img-element.

**djibril** · 07/03/2012, 16h52

Aligner texte et image [HTML 5]

HTML

Vue hybride

Discussions similaires

Partager

Partager