Home / Questions / 452043
Accepted
Juan Cabello
Asked: 2022-05-15 10:14:10 +0800 CST 2022-05-15 10:14:10 +0800 CST

Center text css

  • 772

I have a versus which is launching random characters. On one side I have character1 and on the other character2 and in the middle the word vs. The problem is that since they are random words, the "vs" is never centered since there are words larger than others and this one rotates a lot and I have things like these

enter image description here

I want that regardless of the word, the "vs" is always centered even if the characters are different.

<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;
    }
css

1 Answers

  1. Best Answer

    What I would do is group it inside a flexbox container, I leave you this link to learn a little more about 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>

    I hope to help you with this, anything you tell me, good luck!

    • 2