Comment aligner des mots et des images en CSS-tutoriel CSS-php.cn

Comment aligner des mots et des images en CSS

藏色散人

Libérer： 2023-01-04 09:38:47

original

22996 Les gens l'ont consulté

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.

Comment aligner des mots et des images en CSS

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>

Copier après la connexion

Image d'effet :

Comment aligner des mots et des images en CSS

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>

Copier après la connexion

Rendu :

Comment aligner des mots et des images en CSS

<. 🎜>3, placez respectivement les images et le texte dans différents divs. Le code html est le suivant :

<!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>

Copier après la connexion

Rendu :

Comment aligner des mots et des images en CSS