Comment déplacer le texte autour d`une image avec html ou css

Déplacer le texte autour d`une image avec HTML ou CSS

Déplacer le texte autour d`une image avec HTML ou CSS

Lorsque vous ajoutez une photo avec le texte sur votre page Web, le style par défaut affiche le graphique ci-dessus ou au-dessous du contenu environnant, en laissant un espace blanc à gauche et à droite de l`image. Ce gaspillage de l`espace et rend l`image apparaissent disjoints de votre texte. Pour résoudre ce problème, vous devez spécifier le positionnement de l`image afin que le texte s`enroule autour des frontières de l`image la possibilité d`utiliser soit HyperText Markup Language (HTML) ou feuilles de style en cascade (CSS). Utilisez HTML ou CSS pour déplacer le texte autour de vos images, comme vous préférez.

HTML

Lancez le fichier de page dans votre programme d`éditeur de texte de votre ordinateur et placez le curseur dans la "" marque. Type "align =" et suivez cela avec des guillemets comme ceci:

Entrer "droite," "la gauche," "milieu," "Haut" ou "bas" après l`entrée align pour indiquer où votre image apparaît par rapport à votre texte. UNE "Haut" l`alignement fait apparaître votre contenu au plus haut point de l`image, la "milieu" déplace le texte au milieu de la photo et la "bas" dirige le contenu de commencer au bas de l`image. De plus, un "droite" la position, déplace vos données vers la gauche de l`image et "la gauche" l`alignement met le contenu à droite de l`image. Tapez votre code comme suit:

Enregistrez le fichier.

CSS

Video: 10 - HTML & CSS - Les couleurs du texte

Placez votre curseur dans la "" tag et le type "style =" avec un ensemble de guillemets avant la dernière équerre. Pour illustrer:

Entrer "flotte:" à l`intérieur des guillemets et saisissez le "la gauche" ou "droite" attribuer un nom l`alignement du graphique. le "la gauche" valeur rend votre image apparaît sur la gauche et déplace votre texte à droite, alors que le "droite" attribut fait le contraire. Par exemple:

Video: Tutoriels HTML / CSS - Centrer un DIV et du Contenu avec le CSS

Enregistrez votre document.

Les références

  • lien W3Schools: HTML Aligner Attribute
  • lien W3Schools: CSS Float propriété
  • lien W3Schools: CSS Comment

Video: Tutoriel CSS : Centrer les éléments

A propos de l`auteur

Brandy Alexander a été écrit professionnellement depuis 2001. Elle est un artiste en verre avec un design Web et le contexte de rédaction technique. Alexander dirige sa propre entreprise de verre d`art et a contribué à "Verre Magazine Ligne" ainsi que diverses publications en ligne.

Articles connexes