2

Me he creado unos hipervínculos circulares pero no sé cómo centrar el texto verticalmente al círculo. A ver si alguien me echa una mano.

Código HTML para crear e menú

<div class="menu">
      <div class="col-lg-12 col-md-12 col-sm-1">
                  <a href="P18/indexP18.php"><i>LINK 1</i></a>
                  <a href="Sulfato/indexsulfato.php"><i>LINK 2</i></a>
                  <a href="Ferrico/indexferrico.php"><i>LINK 3</i></a>
                  <a href="HB10/indexHB.php"><i>LINK 4</i></a>
                  <a href="SulfaCID/indexS3.php"><i>LINK 5</i></a>
                  <a href="Camiones/indexCamiones.php"><i>LINK 6</i></a>
                  <a href="Buscador/indexBuscador.php"><i>LINK 7</i></a>
      </div>
</div> 

Style aplicado al hipervínculo.

.menu a{
    display:block;        
    float: left;
    width: 80px;
    height: 80px;
    background-color: #141414;
    opacity: 0.80;
    margin: 20px;
    border: solid 5px #040404;
    border-radius: 50%; 
    text-align: center;    
}

1 respuesta 1

1

Puedes solucionarlo con display: flex. Esta propiedad transforma al elemento en una caja flexible, pudiendo acceder a todas las propiedades que estas tienen. Dos de ellas son justify-content y align-items, que permiten decidir como quieres que el elemento trate a sus hijos en cuanto a posicionamiento sobre el eje x y el eje y.

Diciendo que quieres que ambos estén centrados consigues que el texto (que es hijo de la etiqueta <a>) quede centrado tanto verticalmente como horizontalmente dentro de su padre.

.menu a {
  float: left;
  width: 80px;
  height: 80px;
  background-color: #141414;
  opacity: 0.80;
  margin: 20px;
  border: solid 5px #040404;
  border-radius: 50%; 
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="menu">
  <div class="col-lg-12 col-md-12 col-sm-1">
    <a href="P18/indexP18.php"><i>LINK 1</i></a>
    <a href="Sulfato/indexsulfato.php"><i>LINK 2</i></a>
    <a href="Ferrico/indexferrico.php"><i>LINK 3</i></a>
    <a href="HB10/indexHB.php"><i>LINK 4</i></a>
    <a href="SulfaCID/indexS3.php"><i>LINK 5</i></a>
    <a href="Camiones/indexCamiones.php"><i>LINK 6</i></a>
    <a href="Buscador/indexBuscador.php"><i>LINK 7</i></a>
  </div>
</div> 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.