0
votes

Comment centrer ce bouton

J'ai donc un bouton que j'essaie de centrer au milieu. Si je spécifie la taille, elle ne reste pas au milieu mais se décale vers la gauche.

<div class="container">
    <div class="row">
        <div class="col text-center">

            <input class = "btn btn-block btn-primary col-md-2" type="submit" id="sumbit" name="submit" value="Login"/>
            </div>   

    </div>
</div>

html css twitter-bootstrap

1 commentaires

Copie possible de Button Center CSS

5 Réponses :

-1
votes

Il vous suffit d'ajouter (style = "text-align: center;) à la balise div

<div class="container">
    <div class="row">
        <div class="col text-center" style="text-align: center;>

            <input class = "btn btn-block btn-primary col-md-2" type="submit" id="sumbit" name="submit" value="Login"/>
            </div>   

    </div>
</div>

0 commentaires

-3
votes

il est maintenant au centre si vous ne voulez pas changer la largeur.

<center> <input class = "btn btn-block btn-primary col-md-2" type="submit" id="sumbit" name="submit" value="Login"/></center>

2 commentaires

Veuillez ne jamais utiliser la balise centrale, elle est obsolète développeur .mozilla.org / en-US / docs / Web / HTML / Element / center . Ce n'est même pas obsolète, c'est obsolète.

Cela ne corrige pas le code incorrect, il le dissimule simplement

4
votes

Je vois que vous utilisez des classes Bootstrap, alors assurez-vous d'abord d'inclure le fichier css Bootstrap dans votre tête.

Le problème est que vous avez la classe 'btn-block' sur le btn qui le fera prendre toute la ligne et cela empêchera également la classe 'text-center' de centrer le bouton.

Il suffit de supprimer la classe btn-block sur le bouton pour qu'elle n'occupe que le l'espace nécessaire pour le contenu des boutons et lui permet d'être centré comme un élément de niveau en ligne.

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

<div class="container">
    <div class="row">
        <div class="col text-center">

            <input class="btn btn-primary" type="submit" id="submit" name="submit" value="Login"/>
            </div>   

    </div>
</div>

1 commentaires

Cela devrait être marqué comme la bonne réponse ici, je pense. Comme l'OP utilise le bootstrap, je pense que les réponses devraient inclure un moyen d'y parvenir en utilisant le bootstrap au lieu de styles en ligne.

-1
votes

L'ajout de (style = "text-align: center";) résout le problème. Assurez-vous simplement d'ajouter le deuxième guillemet après «centre». J'espère que cela aidera

<div class="container">
    <div class="row">
        <div class="col text-center" style="text-align: center";>

            <input class = "btn btn-block btn-primary col-md-2" type="submit" id="sumbit" name="submit" value="Login"/>
            </div>   

    </div>
</div>

1 commentaires

Cette solution ne fonctionnera pas lorsque Bootstrap est chargé car la classe btn-block fera du bouton un élément de niveau bloc et donc text-align: center n'aura aucun effet

-2
votes

Essayez d'utiliser l'élément de style CSS text-align: center.

<div style="text-align: center">
  <div class="container">
    <div class="row">
        <div class="col text-center">

            <input class = "btn btn-block btn-primary col-md-2" type="submit" id="sumbit" name="submit" value="Login"/>
            </div>   

    </div>
</div>
</div>

0 commentaires