[FIXED] How to make text fit in div?

Issue

I'm styling a link to make it look like the photo. The problem is in the second div, text over div. In the scope of the question is an example of the photo of how it is and how it should be. (I left the text color in black to illustrate the problem)

How it should be

  var div_color = document.getElementsByClassName('div-categoria');
  console.log
  div_color[0].style.backgroundColor = '#7d35ed';
  div_color[1].style.backgroundColor = '#e93f3f';
  div_color[2].style.backgroundColor = '#e4bf2a';

  .categoria{
    margin: 2.5rem 0;

  }
  .div-categoria{
    display: inline-flex;
    height: 120px;
    width: 120px;
    border-radius: 10px;
    transition: transform .2s;
    margin-right: 20px;
    position: relative
  }
  .div-categoria:hover{
    transform: scale(1.10);
  }
  .categoria a{
    text-decoration: none;
    color: white;
  }
  .div-categoria p {
    margin: 0;
    color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);

    text-transform: uppercase;
    font-size: 25px;
  }

<div class="categoria">
  <a href="#link"><div class="div-categoria"><p>Comida</p></div></a>
  <a href="#link"><div class="div-categoria"><p>Bebidas Alcoolicas</p></div></a>
  <a href="#link"><div class="div-categoria"><p>Bebidas</p></div></a>
</div>

Solution

  var div_color = document.getElementsByClassName('div-categoria');
  console.log
  div_color[0].style.backgroundColor = '#7d35ed';
  div_color[1].style.backgroundColor = '#e93f3f';
  div_color[2].style.backgroundColor = '#e4bf2a';

  .categoria{
    margin: 2.5rem 0;

  }
  .div-categoria{
    display: inline-flex;
    height: 120px;
    width: 120px;
    border-radius: 10px;
    transition: transform .2s;
    margin-right: 20px;
    position: relative
 
  }
  .div-categoria:hover{
    transform: scale(1.10);
  }
  .categoria a{
    text-decoration: none;
    color: white;
  }
  .div-categoria p {
    margin: 0;
    color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    z-index: 1

    text-transform: uppercase;
    font-size: 25px;
    text-align: center;
  }

<div class="categoria">
  <a href="#link"><div class="div-categoria"><p>Comida</p></div></a>
  <a href="#link"><div class="div-categoria"><p>Bebidas Alcoolicas</p></div></a>
  <a href="#link"><div class="div-categoria"><p>Bebidas</p></div></a>
</div>

now your problem is solved.

Answered By - Manoj Tolagekar