web-dev-qa-db-fra.com

Bouton central sous la forme dans le bootstrap

j'ai des problèmes avec Bootstrap. J'ai centré le formulaire et le bouton en utilisant span6 offset3 et je ne sais pas comment centrer le bouton sous ce formulaire pour le moment. J'ai essayé avec text-align: center mais c'est toujours plus à gauche.

<div class="container">
    <div class="row">
        <div class="span6 offset3">
            <form>
                <input class="input-xxlarge" type="text" placeholder="Email..">
                <p style="line-height: 70px; text-align: center;"><button type="submit" class="btn">Confirm</button></p>
            </form>
        </div>
    </div>
</div>

htmlcssbuttontwitter-bootstrapcenter
11
Fastkowy

Supprimez cette balise <p> et ajoutez le bouton dans un <div class="form-actions"> comme ceci:

<div class="form-actions">
    <button type="submit" class="btn">Confirm</button>
</div>

puis augmentez la classe CSS avec:

.form-actions {
    margin: 0;
    background-color: transparent;
    text-align: center;
}

Voici une démo de JS Bin: http://jsbin.com/ijozof/2

Recherchez form-actions dans la doc Bootstrap ici:

http://Twitter.github.io/bootstrap/base-css.html#buttons

22
Leniel Maccaferri

Avec Bootstrap 3, vous pouvez utiliser l'attribut de style "centre de texte".

<div class="col-md-3 text-center"> 
  <button id="button" name="button" class="btn btn-primary">Press Me!</button> 
</div>
12
Karl Gjertsen

Essayez d'ajouter cette classe 

class="pager"

<p class="pager" style="line-height: 70px;">
    <button type="submit" class="btn">Confirm</button>
</p>

J'ai essayé le mien dans un <div class=pager><button etc etc></div> qui a bien fonctionné

Voir http://getbootstrap.com/components/ regarder sous Pagination -> Pager

Cela ressemble à la bonne classe d'amorçage pour centrer cela, text-align: center; est destiné au texte et non aux images et aux blocs, etc. 

1
user3257693

Je le fais comme ça <center></center>

<div class="form-actions">
            <center>
                    <button type="submit" class="submit btn btn-primary ">
                        Sign In <i class="icon-angle-right"></i>
                    </button>
            </center>
</div>
1
Moncho Chavez

Width:100% et text-align:center fonctionneraient selon mon expérience

<p style="display:block; line-height: 70px; width:100%; text-align:center; margin:0 auto;"><button type="submit" class="btn">Confirm</button></p>
1
Kevin Lynch

En utilisant Bootstrap, la méthode correcte consiste à utiliser la classe offset. Utilisez les mathématiques pour déterminer le décalage à gauche. Exemple: vous voulez un bouton pleine largeur sur le mobile, mais 1/3 de largeur et centré sur la tablette, le bureau, le grand bureau.

Donc, sur 12 colonnes "bootstrap", vous utilisez 4 pour le décalage, 4 pour le bouton, puis 4 est vide à droite.

Voyez si cela fonctionne!

0
Mitch McCoy

Cela fonctionne complètement essayez ceci:

<div class="button pull-left" style="padding-left:40%;" >
0
chitra

Si vous utilisez Bootstrap 4 , essayez ceci:

<div class="mx-auto text-center">
    <button id="button" name="button" class="btn btn-primary">Press Me!</button>
</div>
0
Reeya Grace

Avec Bootstrap, vous pouvez simplement utiliser la classe text-center:

<div class="container">
    <div class="row">
        <form>
            <input class="input-xxlarge" type="text" placeholder="Email..">
        </form>

        <div class="text-center">
            <button type="submit" class="btn">Confirm</button>
        </div>
    </div>
</div>

DEMO

0
Legionar