I need to make three circles with a text in the center of the circle and under each circle there will be a text that can be a word, or several words, the circles must be aligned in the center of the line, everything works OK .
The problem occurs when the text below the circles has more than one line, the circles are aligned down, when they should be aligned up.
Any ideas that I may be missing or left over in the code?
Attached image with the result of the code:
This is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.centrar_circulos {
width: 100%;
margin: auto;
}
.circulo {
width: 100px;
height: 100px;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
line-height: 100px;
text-align:center;
color: #FFFFFF;
background-color: #000000;
font-size: 50px;
}
.texto_circulo {
width: 100px;
padding-top: 5px;
line-height: 20px;
color: #FFFFFF;
background-color: #000000;
font-size: 18px;
}
nav {
background-color: grey;
text-align:center;
}
nav ul {
justify-content: top;
padding-left: 10px;
padding-right: 10px;
}
nav li {
display:inline-block;
padding: 0 10px 25px 10px;
}
</style>
</head>
<body>
<div class="centrar_circulos">
<nav>
<ul>
<li><div class="circulo">1</div><div class="texto_circulo">Ganador</div></li>
<li><div class="circulo">12</div><div class="texto_circulo">Segundo lugar</div></li>
<li><div class="circulo">123</div><div class="texto_circulo">El ultimo lugar</div></li>
</ul>
</nav>
</div>
</body>
</html>
You can try adding
flex
anav ul
and changing thejustify-content
a tocenter
. To make itresponsive
addflex-flow:row wrap
orflex-wrap:wrap
In your code it would look like this:
I hope it helps you, greetings.