1

Tengo el siguiente código html

<div class="col-lg-4 col-md-4">
      <button style="margin: 1em auto" type="submit " class="send-btn">Enviar</button>
      <button style="margin: 1em auto" type="submit" class="send-btn">Modificar</button>
      <button style="margin: 1em auto" type="submit" class="send-btn">Cancelar</button>
</div>

Los cuales utilizan las siguiente clase css:

.send-btn {
    background: #d61010;
    color: #fff;
    font-size: 14px;
    width: 100%;
    height: 55px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.4s linear;
    position: relative;
    overflow: hidden;
    z-index: 1
}

En la pagina, me salen alineados de esta forma introducir la descripción de la imagen aquí

Quisiera que estuvieran alineados de forma horizontal, debajo del selector de archivos y centrados ¿Alguien me ayuda?

4
  • echa un vistazo a esta pregunta igual te puede ayudar es.stackoverflow.com/questions/46980/…
    – Joacer
    el 3 nov. 2021 a las 9:21
  • Prueba en el contenedor <div> de los botones: > .contenedor{ display:flex; flex-direction: row; }
    – Miguel
    el 3 nov. 2021 a las 11:31
  • Por favor recuerda añadir todo el código de la imagen que estás mostrando, para crear un ejemplo mínimo verificable apropiado.
    – Excorpion
    el 3 nov. 2021 a las 12:01
  • Si esas usando bootstrap es facil, dentro de tu col-md-4 haz un row y dentro divides cada boton en 4 columnas y listo, sin necesidad de css extra el 3 nov. 2021 a las 14:36

1 respuesta 1

0

Puedes utilizar el módulo flex-box para hacer alineaciones horizontales.

<div class="col-lg-4 col-md-4 flex-container">
      <button style="margin: 1em 0" type="submit " class="send-btn">Enviar</button>
      <button style="margin: 1em 0" type="submit" class="send-btn">Modificar</button>
      <button style="margin: 1em 0" type="submit" class="send-btn">Cancelar</button>
</div>
.flex-container {
  // Por defecto tiene un flex-direction: row
  display: flex;
}

Con esta regla todos los elementos contenidos por flex-container(flex-items) se posicionarán de forma horizontal (se ubican en forma lineal en el main-axis).

Si quieres controlar las posiciones de los flex-items en el main-axis puedes utilizar la propiedad justify-content

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.