Maison >interface Web >tutoriel CSS >Comment aligner des mots et des images en CSS
Comment aligner des mots et des images en CSS
- 藏色散人original
- 2021-01-06 09:17:4523043parcourir
Comment aligner les mots et les images en CSS : 1. Alignez les mots et les images en ajoutant « vertical-align:middle ; » en CSS ; 2. Alignez les mots et les images en définissant une image d'arrière-plan dans l'alignement CSS 3 ; . Mettez le texte et les images dans différents divs pour aligner les mots et les images.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
Recommandé : "Tutoriel vidéo CSS"
Dans le code HTML, vous devez parfois ajouter une icône à côté du texte.
Par défaut, l'image est alignée en haut et le texte est aligné en bas. Par conséquent, l'image est généralement haute et le texte est bas, et ne peut pas être aligné horizontalement au milieu.
Il existe trois méthodes courantes : 1. En ajoutant "vertical-align:middle;" au CSS ; 2. Si l'image est une image d'arrière-plan, vous pouvez définir l'image d'arrière-plan en CSS ; et des images dans différents divs. Les trois méthodes ci-dessus peuvent toutes afficher des images et du texte sur la même ligne. Utilisons des exemples pour les appliquer ci-dessous.
1. Ajoutez l'attribut "vertical-align:middle"
Nous utilisons "login" comme exemple dans des situations réelles, transformons "login" en image et définissons "récupérer le mot de passe". Le code html écrit est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div >
<img src="logo.jpg" alt="" style="max-width:90%"><a href="">找回密码</a>
</div>
</body>
</html>Image d'effet :
2. Définissez l'image comme image de fond
Si notre image S'il s'agit d'une image de fond, vous pouvez utiliser "background" en css pour définir l'image. Le code html est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.haokan{
width: 300px;
height: 50px;
line-height: 50px;
background-color: red;
background: url(logo.jpg) no-repeat left center;
}
.haokan a{
display: block;
margin-left: 116px;
}
</style>
</head>
<body>
<div>
<a href="">找回密码</a>
</div>
</body>
</html>Rendu :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.divs .imgs{
display: inline-block;
vertical-align: middle;
}
.divs .infos{
display: inline-block;
}
</style>
</head>
<body>
<div>
<div><img src="logo.jpg" alt=""></div>
<div><a href="">找回密码</a></div>
</div>
</body>
</html> Rendu :
Enseignement de la programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!