2

Estoy queriendo centrar un texto, tanto horizontal como verticalmente. Usé Flexbox, pero no da resultado, no sé si hay un error. Al botón lo programo con HTML y lo estilizo con CSS.

.Primera_Caja_con_texto {
    
     padding-top: 5px;
     padding-bottom: 460px;
     padding-right: 5px;
     padding-left: 5px;
     background-color: white;
     border-color: #737373;
     border-style: solid;
     display: flex;
     justify-content: center;
     align-items: center;
     
    
}
<div class="Primera_Caja_con_texto">
                <strong> N1 en el mercado automotriz, especializándonos en Cerrajería y Accesorios del automotor.
                </strong>
</div>

1
  • ¿Por qué usas padding?
    – user128299
    Commented el 2 ago. 2021 a las 16:18

2 respuestas 2

4

Flexbox precisamente facilita el tema de los centrados verticales. Mira esta solución, el texto queda centrado vertical y horizontalmente en el bloque. Le he puesto un alto de 400px para que sea evidente el doble centrado.

.Primera_Caja_con_texto {
 display: flex;
 justify-content: center;
 align-items: center;
 height:400px;
 background-color: white;
 border-color: #737373;
 border: 1px solid black;
}
<div class="Primera_Caja_con_texto">
     <strong> N1 en el mercado automotriz, especializándonos en Cerrajería y Accesorios del automotor<strong>
        </div>

2
  • Sí, lo que ha faltado es ponerle altura al elemento. Commented el 2 ago. 2021 a las 16:22
  • Perfecto! Muchas Gracias! Commented el 2 ago. 2021 a las 16:31
1

He de comentarte que el error inicial es que para lograr el objetivo planteado mezcles el uso de padding junto con las bondades de flexbox.

En este caso debes tener presente que al darle valores a padding-x: algo; estas separando al contenido de su contenedor, en este caso el texto.

Opciones

  1. Dado lo anterior, entonces claramente debes guiarte con la respuesta del otro usuario.
  2. Dar una misma medida de padding para (top, left, right, bottom), lo cual te ayudará a separar de manera uniforme al contenido (mismo que recomendaría pertenezca a una etiqueta que ayude a manipularlo de manera posterior como una etiqueta p) y alinear el texto al centro

    <style>
      .Primera_Caja_con_texto {
         border-color: #737373;
         border-style: solid;
         font-weight: bold;
         padding: 50px;
         text-align: center;
      }
    </style>
    
    <div class="Primera_Caja_con_texto">
      <p>
          N1 en el mercado automotriz.
      </p>
    </div>

0

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.