Comment mettre l'image en ligne avec du texte

Lors de la publication des articles de recherche, les images en ligne avec les données texte sont utilisées pour une meilleure compréhension de l'utilisateur. Les images en ligne sont utilisées pour transmettre la valeur et les informations. Il prend également en charge un large éventail de formats de données, notamment «GIFS», «JPG», «PNG» et «SVG». De plus, les utilisateurs peuvent également utiliser ce format pour fabriquer la page Web. Pour ce faire, HTML / CSS fournit différentes propriétés pour ajouter l'image en ligne avec le texte.

Cet article expliquera:

• • Méthode 1: Comment mettre une image en ligne avec du texte en HTML?
  • Méthode 2: Comment mettre une image en ligne avec du texte en utilisant les propriétés CSS?

Méthode 1: Comment mettre une image en ligne avec du texte en HTML?

Pour mettre une image en ligne avec du texte en HTML, utilisez le style en ligne dans HTML. Pour ce faire, suivez les instructions données.

Étape 1: Ajouter une image

Initialement, ajoutez une image à l'aide du «" étiqueter. Ensuite, appliquez le style en ligne en utilisant le «style" attribut. La description de l'attribut est mentionnée ci-dessous:

• • Le HTML "style»La balise contient plusieurs propriétés CSS et paires de valeurs qui peuvent être utilisées directement. Pour ce faire, la valeur de cet attribut est définie comme «Adigne vertical: milieu".
  • Le "alignement vertical«La propriété est appliquée pour contrôler l'alignement vertical de l'élément.
  • "SRC"Est utilisé pour insérer un fichier multimédia à l'intérieur de l'élément.

Étape 2: Faites un conteneur «div»

Ensuite, utilisez le «»Élément pour faire un conteneur div dans la page HTML. Ensuite, insérez le «style”Attribut avec les valeurs suivantes:

• • "Adigne vertical: milieu”Est ​​défini pour le style en ligne et la définition de l'alignement du conteneur.
  • "Affichage: en ligne"Dit à l'élément de s'adapter à la même ligne.
  • Après cela, intégrez le texte entre le «div" étiqueter:

La nature nous fournit la paix.

On peut remarquer que l'image a été ajoutée en ligne avec le texte sur la page HTML:

Méthode 2: Comment mettre une image en ligne avec du texte en utilisant les propriétés CSS?

Pour mettre une image en ligne avec le texte, le CSS "alignement vertical«Propriété avec la valeur»milieu" et "afficher" comme "en ligne" peut être appliqué.

Étape 1: Créer un conteneur principal Div

Tout d'abord, créez un conteneur Div à l'aide du «”Tag et ajoutez un attribut ID avec un nom spécifique.

Étape 2: Créez un conteneur div imbriqué

Ensuite, créez un prochain conteneur entre le premier "div«Récipient et insérez un«classe»Attribut avec un nom particulier. Ensuite, intégrez du texte entre la balise «div».

Étape 3: Ajouter une image

Après cela, ajoutez une image en utilisant le «" étiqueter. Ensuite, ajoutez les attributs ci-dessous dans la balise d'image:

• • "SRC"Est utilisé pour ajouter le fichier multimédia. Pour ce faire, nous avons défini le nom de fichier comme cette valeur d'attribut.
  • "largeur" et "hauteur»Détermine la taille de l'élément d'image ajouté:

La nature est un cadeau précieux pour toute l'humanité et d'autres organismes.

Il nous fournit de l'air frais, de l'oxygène et de la beauté.

Sortir

Étape 4: Conteneur de style «div»

Accédez à l'élément DIV à l'aide de la valeur de l'ID comme «#principal»:

#principal
marge: 30px 80px;
Color en arrière-plan: RVB (217, 252, 203);
Border: Green massif 3px;
rembourrage: 30px;

Ensuite, appliquez les propriétés CSS mentionnées dans l'extrait de code ci-dessus:

• • "marge”Définit un espace en dehors de la frontière définie.
  • "Couleur de l'arrière plan»La propriété a alloué la couleur à l'arrière de l'élément défini.
  • "frontière»Détermine une frontière autour de l'élément.
  • "rembourrage"Est utilisé pour ajouter l'espace à l'intérieur de la bordure définie.

Étape 5: faire une image en ligne avec du texte

Accédez au conteneur DIV imbriqué avec le nom de classe «.contenu principal»Et appliquez les propriétés CSS répertoriées:

.contenu principal
hauteur: 100px;
Largeur: 200px;
Adigne vertical: milieu;
Affichage: en ligne;

Ici:

• • "hauteur" et "largeur»Les propriétés sont utilisées pour régler la taille de l'élément.
  • "alignement vertical«Est utilisé pour régler l'alignement vertical comme«milieu".
  • "afficher»Contrôle comment un élément est géré en tant que composant de bloc ou de ligne, ainsi que la disposition de ses enfants.

Sortir

Il s'agit de mettre une image en ligne avec le texte.

Conclusion

Pour mettre l'image en ligne avec le texte, ajoutez d'abord une image et un texte dans le conteneur div. Ensuite, l'utilisateur peut utiliser le style en ligne dans HTML et appliquer les propriétés CSS. Pour ce faire, appliquez le «alignement vertical"Propriété CSS avec la valeur"milieu" et "afficher"Définir comme"en ligne«Pour mettre l'image en ligne avec le texte. Ce message a expliqué la méthode pour mettre l'image en ligne avec le texte.