1

tengo textos que necesito centrar pero el problema es que los textos tienen diferente longitud y yo los posiciono directamente con css por ejemplo.. en la monedas pueden aparecer 1000 y en otra moneda solo 40.. y no puedo centrar por separado ya que ambos estan en un bucle.. Imagen

Como se puede observar la moneda que tiene 40 y la que tiene 100 no estan centrados correctamente hay alguna forma de hacer esto? mi css

 .posicion_texto_de_circulo {
    position: absolute;
    /*background-color: white;*/
    top: 20%;
    left: 14%;
    transform:translateX(-50%);
    width: 2px;
    height: 100%;
  }

mi codigo

<div class="row"> @foreach($catalogos as $c) <div class="col-md-3"> <img width="200" class="casi_circulo" src="{{asset('imagenes/productos/'.$c->image)}}" alt=""> <a data-toggle="modal" data-target="#exampleModal{{$c->id}}" href="#" class="btn btn_catalogo poll-name" class="">{{$c->name}}</a> </div> <div class="col-md-3"> <img width="200" src="{{asset('front/css/moneda.png')}}" alt=""> <h2 class="posicion_texto_de_circulo rotar"><b>{{$c->price}}</b><h2> <a data-toggle="modal" data-target="#exampleModal{{$c->id}}" href="#" class="btn btn_catalogo2">CANJEAR CARSANIES</a> </div> @endforeach </div>

1 respuesta 1

3

text-align Establece la alineación del contenido de un elemento de bloque:

Valores permitidos:

  • left
  • right
  • center
  • justify
  • inherit

Puedes probar con esto tu css con esto:

.posicion_texto_de_circulo {
    position: absolute;
    text-align: center;
    /*background-color: white;*/
    top: 20%;
    transform:translateX(-50%);
    height: 100%;
    width: 100%;
  }

O también:

.posicion_texto_de_circulo {
    position: absolute;
    text-align: justify;
    /*background-color: white;*/
    top: 20%;
    transform:translateX(-50%);
    height: 100%;
    width: 100%;
  }

Para tener más claro el concepto puedes revisar esta Documentación
Espero haya sido de ayuda!

8
  • Buenas.. gracias por responder... con tu codigo lo que hace es lo manda para un costado y todos empiezan desde la misma posicion... yo lo que necesito es que el texto aparezca centrado en la moneda sin importar si el numero es 40 o 1000 Commented el 19 ago. 2019 a las 15:14
  • ¿Si colocaste el width: 100%; ?
    – jsdnlb
    Commented el 19 ago. 2019 a las 15:18
  • 1
    No.. ahora lo agregue, pero el numero sale de la moneda. Afectara si lo posicion con left: 20%;?? Commented el 19 ago. 2019 a las 15:21
  • 1
    agregue al codigo left: -20%; y al parecer funciona bien! Commented el 19 ago. 2019 a las 15:22
  • 1
    Excelente amigo, me alegra que haya sido de ayuda!
    – jsdnlb
    Commented el 19 ago. 2019 a las 15:24

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.