0
375
Views¿Cómo pongo texto debajo de los iconos?
Quiero poner texto debajo de algunos íconos, pero termina después, como en el hipervínculo a continuación. Traté de usar el intervalo, pero el texto era invisible y he estado luchando durante aproximadamente 1 hora.
Como luce:
Pero así es como quiero que se vea:
Aquí está el código:
.services-col { min-width: 150px; height: 150px; background: rgba(255, 99, 71, 1); display: flex; text-align: center; justify-content: center; align-items: center; border-radius: 50%; font-size: 22px; margin: 0 180px; } h3 { text-align: center; font-weight: 600; margin: 10px 0; } .services-col:hover { box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5); } <div class="services-col"> <div class="icon"><i class="fa-solid fa-wrench" aria-hidden="true"></i></div> <h3>Refurbishing</h3> </div> <div class="services-col"> <div class="icon"><i class="fa-solid fa-hammer"></i></div> <h3>Construction</h3> </div> <div class="services-col"> <div class="icon"><i class="fa-solid fa-ruler" aria-hidden="true"></i></div> <h3>Designing</h3> </div>
·
Juan Pablo Isaza
3 answers
Answer question0
tu estructura html es incorrecta
.services-col { min-width: 150px; height: 150px; background: rgba(255, 99, 71, 1); border-radius: 50%; font-size: 22px; margin: 0 180px; } .col{ display: flex; flex-direction:column; text-align: center; justify-content: center; align-items: center;} h3 { text-align: center; font-weight: 600; margin: 10px 0; } .services-col:hover { box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5); } #container{ display:flex; } <div id='container'> <div class='col'> <div class="services-col"></div> <div class="icon"><i class="fa-solid fa-wrench" aria-hidden="true"></i></div> <h3>Refurbishing</h3> </div> <div class='col'> <div class="services-col"></div> <div class="icon"><i class="fa-solid fa-hammer"></i></div> <h3>Construction</h3> </div> <div class='col'> <div class="services-col"></div> <div class="icon"><i class="fa-solid fa-ruler" aria-hidden="true"></i></div> <h3>Designing</h3> </div> </div>
·
Juan Pablo Isaza
Report
0
Es posible posicionar absolutamente el texto fuera del contenedor usando una top:100% superior, el h3 pasó por la parte inferior del div y aplicando una position: relative a sus columnas de servicio. Aunque esto es un poco torpe...
.services-col{ min-width: 150px; height: 150px; background: rgba(255,99,71,1); display: flex; text-align: center; justify-content: center; align-items: center; border-radius: 50%; font-size: 22px; margin: 0 180px; position:relative; } h3{ text-align: center; font-weight: 600; margin: 10px 0; position:absolute; top: 100%; } .services-col:hover{ box-shadow: 0 0 20px 0px rgba(0,0,0,0.5); } <div style="display:flex;flex-direction:row;"> <div class="services-col"> <div class="icon"><i class="fa-solid fa-wrench" aria-hidden="true"></i></div> <h3>Refurbishing</h3> </div> <div class="services-col"> <div class="icon"><i class="fa-solid fa-hammer"></i></div> <h3>Construction</h3> </div> <div class="services-col"> <div class="icon"><i class="fa-solid fa-ruler" aria-hidden="true"></i></div> <h3>Designing</h3> </div> </div>
·
Juan Pablo Isaza
Report
0
Recomiendo envolver otro div alrededor del ícono, separando el texto del círculo. Deberá agregar algo de estilo a la caja. Por ejemplo:
.services-col { background: rgba(255, 99, 71, 1); display: flex; text-align: center; justify-content: center; align-items: center; border-radius: 50%; font-size: 22px; width: 150px; height: 150px; } .box { width: 150px; } h3 { text-align: center; font-weight: 600; margin: 10px 0; } .services-col:hover { box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5); } <div class="box"> <div class="services-col"> <div class="icon"><i class="fa-solid fa-wrench" aria-hidden="true"></i></div> </div> <h3>Refurbishing</h3> </div>
·
Juan Pablo Isaza
Report
Answer question