1

Tengo un versus el cual va lanzando personajes random. De un lado tengo el personaje1 y del otro al personaje2 y en el medio la palabra vs. El problema es que al ser palabras random nunca está centrado el "vs" ya que hay palabras más grande que otras y esta se va rotando mucho y me quedan cosas como estas

introducir la descripción de la imagen aquí

Quiero que a pesar de cual sea la palabra el "vs" siempre quede centrado aunque los personajes sean diferentes.

<p className="tematica__versus">{tematicaRandom.personaje1}
  <span className="tematica__vs">vs</span>
  {tematicaRandom.personaje2}
</p>



.tematica__versus{
        font-size: 80px;
        color: #e1e1e1e1;
        font-weight: 700;
        margin-top: 70px;
        text-align: center;
    }

    .tematica__vs{
        padding: 0 20px;
    }
4
  • 1
    Si son diferentes... ¿Como estas ordenando esas palabras? Estan cada palabra dentro de un div diferente ?? o las 3 son un div, por que puede que ese sea tu problema para empezar. Recuerda añadir el código de tu desarrollo para ver que sucede.
    – Excorpion
    el 14 may. 2021 a las 18:19
  • Ok, ya edito la publicación el 14 may. 2021 a las 18:20
  • 1
    Recuerda añadir en el post y en las etiquetas el lenguaje en el que estás trabajando. Ahora mismo no se si es php puro o laravel u otra cosa.
    – Excorpion
    el 14 may. 2021 a las 18:26
  • React, ya lo edité el 14 may. 2021 a las 18:42

1 respuesta 1

2

Lo que haría seria agruparlo dentro de un contenedor flexbox te dejo este enlace para aprender un poco mas sobre flexbox

.flebox-container {
  display: flex; /*convertimos en flexbox el contenedor*/
  flex-wrap: nowrap; /*acá le decimos que solo sea de una sola linea*/
  justify-content: space-between; /*aca le decimos que se separen automaticamente el primero a la izquierda de todo, el segundo siempre al medio y el ultimo a la derecha de todo.*/
}
<div class="flebox-container">
  <p class="personaje1">{tematicaRandom.personaje1}</p>
  <p class="vs">vs</p>
  <p class="personaje2">{tematicaRandom.personaje2}</p>
</div>

Espero ayudarte con esto, cualquier cosa me comentas, Suerte!

1
  • Y para ayudarte a conseguir algo más cercano a lo que el OP quiere, bastaría con alinear el personaje1 a la derecha y el personaje2 a la izquierda para que se encuentren en el medio.
    – Excorpion
    el 14 may. 2021 a las 18:56

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.