Bootstrap 4, ¿Cómo alineo al centro un botón?


92
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8">
      <div v-for="job in job">
        <div class="text-center">
          <h1>{{ job.job_title }}</h1>
          <p><strong>Google Inc. </strong> - {{ job.location }}</p>
          <h2><u>Job Description</u></h2>
        </div>
        <p v-html="desc"></p>
        <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p>
        <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button>
      </div>
    </div>
    <div class="hidden-sm-down col-md-4"></div>
  </div>
</div>

No sé cómo centrar este botón. En BS 3, solo usaría el bloque central, pero esa no es una opción en BS4. ¿Algún consejo?

Respuestas:


194

En Bootstrap 4, uno debería usar la text-centerclase para alinear bloques en línea .

NOTA: si se text-align:center;define en una clase personalizada que aplique a su elemento principal, funcionará independientemente de la versión de Bootstrap que esté utilizando. Y eso es exactamente lo que se .text-centeraplica.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>
  </div>
</div>


Si el contenido a centrar es block o flex (no inline-), se podría usar flexbox para centrarlo:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="d-flex justify-content-center">
  <button class="btn btn-default">Centered button</button>
</div>

... que se aplica display: flex; justify-content: centera los padres.

Nota: no use en .row.justify-content-centerlugar de .d-flex.justify-content-center, ya que .rowaplica márgenes negativos en ciertos intervalos de respuesta, lo que da como resultado barras de desplazamiento horizontales inesperadas (a menos que .rowsea ​​un hijo directo de .container, que aplica relleno lateral para contrarrestar el margen negativo, en los intervalos de respuesta correctos). Si debe usar .row, por cualquier razón, anule su margen y relleno .m-0.p-0, en cuyo caso terminará con prácticamente los mismos estilos que .d-flex.

Nota importante: la segunda solución es problemática cuando el contenido centrado (el botón) excede el ancho del padre ( .d-flex), especialmente cuando el padre tiene ancho de ventana gráfica, específicamente porque hace que sea imposible desplazarse horizontalmente hasta el inicio del contenido (izquierda- más).
Por lo tanto, no lo use cuando el contenido que se va a centrar podría ser más ancho que el ancho principal disponible y todo el contenido debería ser accesible.


No importa, solo estaba siendo tonto y puse fila dentro de col en lugar de col dentro de fila.
Programación


29

Aquí está el HTML completo que uso para centrar por botón en el formulario Bootsrap después de cerrar form-group:

<div class="form-row text-center">
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
 </div>

3
Respuesta perfecta. Gracias.
Anjana Silva

29

Con el uso de las utilidades de bootstrap 4, podría centrar horizontalmente un elemento configurando los márgenes horizontales en 'auto'.

Para configurar los márgenes horizontales en automático, puede usar mx-auto. El se mrefiere al margen y el xse referirá al eje x (izquierda + derecha) y autose referirá al ajuste. Así que esto establecerá el margen izquierdo y el margen derecho en la configuración 'automática'. Los navegadores calcularán el margen por igual y centrarán el elemento. La configuración solo funcionará en elementos de bloque, por lo que se debe agregar el bloque display: block y con las utilidades de arranque se hace d-block.

<button type="submit" class="btn btn-primary mx-auto d-block">Submit</button>

Puede considerar que todos los navegadores son totalmente compatibles con la configuración de margen automático de acuerdo con esta respuesta Compatibilidad del navegador con margin: auto, por lo que es seguro de usar.

La clase bootstrap 4 text-centertambién es una muy buena solución, sin embargo, necesita un elemento contenedor padre. El beneficio de usar el margen automático es que se puede hacer directamente en el elemento del botón.


2
Esto funcionó para mí usando la plantilla de administración Core UI Pro basada en Bootstrap 4
sunitkatkar

14

Use la text-centerclase en el contenedor principal para Bootstrap 4


1

Lo que funcionó para mí fue (adaptar "css / style.css" a su ruta css):

HTML principal:

 <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

HTML del cuerpo:

 <div class="container">
  <div class="row">
    <div class="mycentered-text">
      <button class="btn btn-default"> Login </button>
    </div>
  </div>
</div>

CSS:

.mycentered-text {
    text-align:center
}

1

para un botón en una barra de navegación colapsada, nada de lo anterior funcionó para mí, así que en mi archivo css lo hice .....

.navbar button {
    margin:auto;
}

¡¡Y funcionó!!


0

también puede simplemente envolver con una clase H o clase P con un atributo de centro de texto


Si no da una respuesta específica, y solo sugiere cómo podría resolver este problema, escríbala en el comentario.
Gander
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.