Comment déplacer du texte autour d'une image avec HTML ou CSS

Lorsque vous incluez une image avec le texte de votre page Web, le style par défaut affiche le graphique au-dessus ou au-dessous du contenu environnant, en laissant un espace blanc à gauche et à droite de l'image. Cela gaspille de l'espace et fait apparaître l'image disjointe de votre texte. Pour résoudre ce problème, vous avez la possibilité d'utiliser le langage de balisage hypertexte (HTML) ou les feuilles de style en cascade (CSS) pour spécifier le positionnement de l'image afin que le texte s'enroule autour des bordures de l'image. Utilisez HTML ou CSS pour déplacer le texte autour de vos images, selon vos préférences.

HTML

Étape 1

Lancez le fichier d'échange dans l'éditeur de texte de votre ordinateur et positionnez votre curseur à l'intérieur du "". Tapez "align=" et faites-le suivre de guillemets comme ceci :

Étape 2

Entrez "droite", "gauche", "milieu", "haut" ou "bas" après l'entrée d'alignement pour spécifier où votre image apparaît par rapport à votre texte. Un alignement "en haut" fait apparaître votre contenu au point le plus élevé de votre image, le "milieu" déplace le texte au milieu de la photo et le "bas" dirige le contenu pour qu'il commence au bas du graphique. De plus, une position "à droite" déplace vos données vers la gauche de l'image et un alignement "à gauche" place le contenu à droite de l'image. Tapez votre code comme suit :

Enregistrez le fichier.

CSS

Étape 1

Placez votre curseur à l'intérieur du "" et tapez " style=" avec un ensemble de guillemets avant le dernier chevron. Pour illustrer :

Étape 2

Entrez « float : » entre les guillemets et tapez l'attribut « gauche » ou « droite » pour nommer l'alignement du graphique. La valeur "gauche" fait apparaître votre image à gauche et déplace votre texte vers la droite, tandis que l'attribut "droite" fait le contraire. Par example:

Enregistrez votre document.