0

Quisiera saber si es posible mediante css establecer el alto de un interno tomando en cuenta el valor del alto del padre ya que realice aparte varios media queries (tamaño de pantalla de celular, y tamaño de pantalla de tablet) y en ellos voy a darle estilo a una etiqueta p, precisamente modificar el font-size

Lo que tengo en el html es:

<div class="contador-icono">
   <i class="icon-basket"></i>
   <div class="box-cont">
      <p id="cont">0</p>
   </div>
</div>
No establecí una altura específica al contenedor padre pero el contenedor que lo contiene tiene un  ``line-height: 2.125em`` el cual cambia su valor para la visualización en celular.

Lo que deseo alcanzar es que la ``<div class="box-cont">`` sea un círculo pequeño que se ubique en la parte superior derecha y que el <p> sea de 0.6250em. Ya cambie el font size y también ya le dí un border-radius. Aún me falta que el <p> este en el centro del círculo (que se centre en el eje x como en el eje y).
en el css tengo:

.contador-icono { display: flex; position: relative; } .contador-icono .box-cont { position: absolute; top: 2px; background-color: #FFF; height: 14px; padding: 2px; border-radius: 50%; z-index: 100; } #cont { font-size: 0.6250em; }


Estoy leyendo sobre ``calc()`` porque creo que me va a servir aunque sea para un futuro y que la posible solución lo va a utilizar.

1 respuesta 1

0

Creo haber entendido lo que precisas, y creo que estás rebuscando mucho con muchas propiedades dificiles de manejar cuando lo colocas con más elementos. Te muestro lo que hice: Primero reorganicé el html

<body>
  <div class="container">
    <div class="circle">
      <p class="number">5</p>
    </div>
  </div>
</body>

Definí un contenedor que encierra el circulo y el numero. Un contenedor que simulará ser el circulo, y un párrafo que contiene un numero

  <body>
<div class="container">
  <div class="circle">
    <p class="number">5</p>
  </div>
</div>

Y luego le dí estilos:

html,
  body {
    /* Ajustes generales básicos */
    height: 100%;
    background-color: lightcoral;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .circle {
    /* Hago que la disposicion de los elementos sea de manera central */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Le doy un ancho y alto iguales, */
    width: 50px;
    height: 50px;

    /* Le doy un fondo, un espacio interno y le doy la forma de circulo */
    background-color: aliceblue;
    padding: 10px;
    border-radius: 100%;
  }

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.