Comment centrer verticalement le contenu dans une cellule de tableau

Victor25

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.

Gérard

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>

Articles connexes