Un site Web réactif peut adapter la taille de l'écran et les dimensions de l'appareil dans lequel il est consulté. Outre la réactivité du site Web, il est également nécessaire que les images et le texte soient alignés et réactifs. Les images alignées sont celles qui enveloppent le texte autour d'elles. Alors que le texte aligné est celui qui ressemble à un paragraphe entier.
Cet article examinera la méthode pour aligner les images et le texte de manière réactive.
Comment aligner les images et le texte de manière réactive ?
Le contenu comprenant les images et le texte peut être aligné de manière réactive à l'aide de Bootstrap. Pour fournir la démonstration, nous avons répertorié deux exemples :
- Centrez le texte verticalement et l’image horizontalement.
- Alignez à gauche le texte et l'image réactive.
Exemple 1 : Centrer, aligner le texte verticalement et l'image horizontalement
Tout d’abord, essayez de centrer l’image horizontalement et le texte verticalement. Pour cela, suivez les instructions ci-dessous :
Étape 1 : Créer une structure HTML
Lors de la création d'une structure HTML, liez d'abord le ' Amorcer » ainsi que le fichier CSS externe. Après cela, créez un Étape 2 : Appliquer CSS Sur conteneur : Sur Sur le texte : On peut observer que le texte est centré verticalement, et l'image est centrée horizontalement : Exemple 2 : aligner à gauche le texte et l'image réactive Dans cet exemple donné, l'image et le texte seront alignés à gauche. Pour cela, suivez les instructions étape par étape ci-dessous : Étape 1 : Créer une structure HTML Le code HTML est le même que ci-dessus, utilisé dans l'exemple. Étape 2 : Appliquer CSS Sur conteneur : Sur Sur le texte : Le résultat confirme que le texte et l'image sont alignés à gauche : Pour aligner les images et le texte de manière réactive, créez d'abord une grille ou une mise en page flexible en CSS, puis définissez le ' aligner l'élément ' valeur de la propriété au ' centre ». Cela alignera les images et le texte de manière réactive en CSS. Cet article a fourni aux utilisateurs un guide complet pour aligner les images et le texte de manière réactive. balise et texte :
< corps >
< div classe = 'récipient' >
< img src = 'image-test.jpg' tout = 'tester l'image' >
< classe div = 'texte' > Ceci est un texte. div >
div >
corps >
:
.récipient {
afficher: fléchir ;
alignement du texte : centre ;
justifier-contenu : centre ;
align-items : centre ;
}
img {
largeur maximale: 100 % ;
hauteur : automatique ;
}
.texte {
taille de police : 16 px ;
largeur maximale : 390 px ;
}
:
.récipient {
afficher: fléchir ;
direction flexible : colonne ;
aligner les éléments : flex-start ;
aligner le texte : gauche ;
}
img {
largeur maximale: 100 % ;
hauteur : automatique ;
}
.texte {
taille de police : 16 px ;
largeur maximale : 390 px ;
}
Conclusion