Donc, j'ai un problème avec CSS et Html.
Je veux adapter l'image dans la bordure que représente l'élément h1.
Le code CSS de l'image:
.img{
height:50px;
width:70px;
}
Le code Html:
<head>
<title>Test</title>
<link rel="Stylesheet" href="Style.css">
</head>
<body>
<img class="img" src="[ProfilePic][1]" alt="Avatar">
<h1 class="center"> Test</h1>
<div style="text-align:right">
<button class="button" href="*">Compras</button>
</div>
</body>
La classe Centre:
.center{
text-align: center;
border-radius: 100 px;
background-color: lightblue;
}
La classe h1:
h1{
padding-top: 20px;
padding-left: 10px;
border: solid;
text-align: center;
font-family: Arial;
font-size: 68px
}
Vous pouvez simplement ajouter l'image <h1>directement dans la balise.
De plus, votre border-radiuspropriété pour votre classe centern'est pas appliquée, car vous disposez d'un espace supplémentaire.
.img{
/*
height:50px;
width:70px;
*/
}
.center{
text-align: center;
border-radius: 100px;
background-color: lightblue;
}
h1{
padding-top: 20px;
padding-left: 10px;
border: solid;
text-align: center;
font-family: Arial;
font-size: 68px
}<h1 class="center"> <img class="img" src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=328&d=identicon&r=PG&f=1" alt="Avatar"><br>Spectric</h1>
<div style="text-align:right">
<button class="button" href="*">Compras</button>
</div>Ou vous pouvez utiliser a <div>pour entourer les deux comme ceci:
.img{
/*
height:50px;
width:70px;
*/
}
.center{
text-align: center;
border-radius: 100px;
background-color: lightblue;
border: solid;
}
h1{
padding-top: 20px;
padding-left: 10px;
text-align: center;
font-family: Arial;
font-size: 68px
}<div class="center">
<img class="img" src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=328&d=identicon&r=PG&f=1" alt="Avatar"><h1>Spectric</h1></div>
<div style="text-align:right">
<button class="button" href="*">Compras</button>
</div>Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots