0

Estoy practicando HTML+CSS y tengo la siguiente duda:

¿Cómo superponer un texto a un svg haciendo uso de css pero sin depender de un position absolute hacia el top de la página?

O sea, es muy fácil hacer esto:

position: absolute;
top: 20%;
left: 4%;
z-index: 2;

Pero yo no quiero que dependa del top de la pantalla... Quiero que esté encima de el top usando algo como margin-top: -0.7em; o sea lo que pretendo es que se superponga el texto y la imagen pero no dependiendo del top de la página.

<!DOCTYPE html>
    <html lang="es">
    <head>
      <meta charset="utf-8">
      <title>LoQueSeaMi</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="author" content="FelipedelosH" />
      <!-- Incluir Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <!-- Incluir Bootstrap JS y dependencias de Popper.js -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </head>
    
    
    <style>
    .tarjeta svg{
      color: grey;
      width: 40%;
      height: 40%;
    }
    
    .kip_total{
      color: red;
      margin-top: -0.7em;
    }
    </style>
    <body>
      <div class="tarjeta">
        <div class="container">
          <div class="row">
            <div class="col">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-check" viewBox="0 0 16 16">
                <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm1.679-4.493-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.708l.547.548 1.17-1.951a.5.5 0 1 1 .858.514ZM11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
                <path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"/>
              </svg>
              <p class="h1 kip_total">400</p>
              <p class="h3 kip_description">Usuarios felices</p>
            </div>
          </div>
        </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </body>
</html>

Adjunto mockups de qué es lo que deseo:

original

deseado

1 respuesta 1

1

Para centrar el contenido podés asignarle al contenedor col display: flex y hacerlo relativo, de esta manera, los hijos podrán estar en posiciones absolutas pero en base a su padre.

Luego, al SVG podés colocarlo absoluto y moverlo hacia el medio del contenedor en el eje y utilizando los atributos de top y transform:

.tarjeta svg {
  color: grey;
  width: 40%;
  max-width: 150px; 
  height: auto; 
}

.kip_total{
  color: red;
}

.container_kip{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  margin-top: 55px;
}
.col {
  position: relative;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}
<body>
  <div class="tarjeta">
    <div class="container">
      <div class="row">
        <div class="col">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-check" viewBox="0 0 16 16">
            <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm1.679-4.493-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.708l.547.548 1.17-1.951a.5.5 0 1 1 .858.514ZM11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
            <path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"/>
          </svg>
          <div class="container_kip">
            <p class="h1 kip_total">400</p>
            <p class="h3 kip_description">Usuarios felices</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
1

Tu Respuesta

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

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