0

tengo la siguiente etiqueta html, tengo el boton bien posicionado, con el tamaño y colores que quiero, pero no consigo usar en ningun sitio correctamente el display flex para que el texto salga centrado

.filaXpac{
  height: 18%;  position: relative;
margin-left: 5% !important;  width: 90%;
}
.colXsalirpac{
    position: relative;
  display: flex;
  justify-content: center;
    align-items: center;
}
.alto100{
  height: 100% !important;
}
.rowsalir{
      width: 130px;
    height: 70px;
  display: flex;
  justify-content: center;
    align-items: center;
    color: #f5f5f5 ;
        background-color: #959f6b;
        border-radius: 5px;
}
.colorsalir{
 color: #f5f5f5 ; 
 font-size: 1.3rem;
 font-weight: 400;
 display: flex;
    justify-content: center;
    align-items: center;
}
<div class="row filaXpac  ">
              <div class="col s12 colXsalirpac alto100 ">

                <div id="botonXsalirR" class="row rowsalir">
                  <div id="PsalR"  class="col s12 alto100 colorsalir">salir de aqui mismo
                
              </div>
                </div>
               
              </div>
             </div>

el tema es que no consigo que se me centre el texto... estoy usando la capa de materialize

3
  • 1
    Has probado con text-align? el 16 dic. 2021 a las 11:42
  • center-align poniendo eso en la ultima etiqueta del html me funciona, pero queria saber por que no me funcionaba por css, Gracias!!
    – ebsigma
    el 16 dic. 2021 a las 11:49
  • 1
    Realmente si está centrando el contenido pero no se ve centrado porque el texto en si no tiene alineación. Si cambias el tamaño de '.rowsalir' y lo haces más grande verás que el contenido si que está centrado. Con 'text-align: center;' en '.colorSalir' centrará el texto dentro del espacio que tiene.
    – Javi Ps
    el 16 dic. 2021 a las 13:05

1 respuesta 1

0

El problema es que no tienes que usar flex, sólo tienes que usar la propiedad text-align:center; y con eso solucionas todo. Tienes que agregar la propiedad en la clase .colXsalirpac. Te quedaría así el código:

.colXsalirpac{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
}

Saludos y espero que funcione.

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.