C'est ce que je veux:
https://i.stack.imgur.com/WTTMA.png
Voici ce que j'ai:
https://i.stack.imgur.com/V7X6m.png
Voici mon code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
</header>
<main>
<ul class="ul">
<li class="li"><img src="https://apod.nasa.gov/apod/image/1703/AuroraTree_Wallace_960.jpg"
alt="pic">Content</li>
</ul>
</main>
<footer>
</footer>
</body>
</html>
CSS
.ul{
display: table;
margin: 0 auto;
list-style: none;
}
.li{
font-weight: bold;
font-size: 50px;
}
img{
width: 200px;
}
J'ai essayé l'alignement vertical au milieu mais cela n'a rien fait, puis j'ai essayé de le centrer avec des marges mais cela n'a pas fonctionné comme je le voulais et j'ai également essayé le flex et la position absolue.
Utiliser une flexbox serait une meilleure solution. La condition préalable est de mettre le «contenu» dans un élément HTML distinct. Dans ce cas, j'ai utilisé un fichier span
.
.ul {
/* display: table; */
margin: 0 auto;
list-style: none;
}
.li {
font-weight: bold;
font-size: 50px;
display: flex; /* Added */
align-items: center; /* Added */
}
img {
width: 200px;
}
<header>
</header>
<main>
<ul class="ul">
<li class="li">
<img src="https://apod.nasa.gov/apod/image/1703/AuroraTree_Wallace_960.jpg" alt="pic">
<span>Content</span></li>
</ul>
</main>
<footer>
</footer>
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