Centre d'un formulaire qui contient un bouton dans un div

Je suis en train d'aligner une <form> d'être centré dans un <div>. C'est ce que j'ai fait jusqu'à présent:

<div style="height:auto; margin: 0 auto; align:center;">
  <form style="width:50%; margin:0 auto;" onSubmit="return false;">
  </form>
</div>

Cette centres de la forme, mais est-il un autre moyen pour ce faire sur une manière plus professionnelle?

J'ai aussi un bouton de formulaire qui est aligné à gauche par défaut. J'ai essayé de changer l'alignement, mais il a échoué.

Qui peut m'aider?

  • Il y a trop de significations de plus en plus professionnel. Voulez-vous que le code à regarder comme si un professionnel de le faire, ou le formulaire pour un aspect plus professionnel?
InformationsquelleAutor sikas | 2011-12-21
  1. 16

    Façon la plus simple est de supprimer le CSS de la version HTML et la suppression de la align:center.

    De cette façon, le button aligne naturellement vers la gauche.

    div{
    height:auto; 
    margin:0 auto; 
    border:1px solid blue;
}

form{
    border:1px solid red;
    width:50%; 
    margin:0 auto;
}

    HTML

    <div>
  <form>
      <button></button>
  </form>
</div>

    Exemple: http://jsfiddle.net/kCt7k/

    EDIT:

    J'ai besoin de la touche centrée.

    Désolé, mal lu, que dans l'original Q.

    Dans ce cas, vous pouvez utiliser text-align:center

    form{
    border:1px solid red;
    width:50%; 
    margin:0 auto;
    text-align:center;
}

    Exemple 2: http://jsfiddle.net/kCt7k/1/

    Cependant, cela peut mess avec les autres éléments dans le formulaire.

    Vous pourriez tout simplement la button comme un block élément et d'appliquer des marges à elle.

    button{
    width:100px;
    display:block;
    margin:0 auto;
}

    Exemple 3: http://jsfiddle.net/kCt7k/2/

    • J'ai besoin de la touche centrée.
    • c'est super, mais, j'ai besoin d'avoir seulement le bouton pour être centré, pas de tous les éléments du formulaire.
    • MERCI!!!!, cela a résolu tous mes soucis 🙂
    • Mon plaisir @sikas!
    • Vous n'avez pas mentionné que align n'est même pas une propriété CSS.
    • Vous avez raison @Sparky672. J'ai juste dit que l'OP pour l'enlever complètement.
    • Vous avez la meilleure (et la plus complète) réponse sur cette page (+1) mais j'ai été surpris que personne d'autre ne l'a attrapé.
    • Merci @Sparky672!

    InformationsquelleAutor Jason Gennaro
  2. 1

    [est] - il un autre moyen pour être plus professionnel?

    <div style="height:auto; margin: 0 auto; align:center;">

    Personne d'autre n'a mentionné cette erreur, mais align n'est pas une propriété CSS.

    Peut-être que vous avez voulu dire align comme un <div> attribut...

    <div align="center">

    Cependant, c'est obsolète, de sorte que le centrage horizontalement dans une <div> serait bien fait avec text-align...

    <div style="text-align: center;">
    InformationsquelleAutor Sparky
  3. 0

    Être "plus professionnel" pourrait entraîner le déplacement de vos attributs de style à un autre fichier CSS. Autre que cela, cela semble parfaitement raisonnable.

    Voulez-vous que je devine ce que vous avez fait avec le bouton qui est mal?

    • mais le bouton n'est pas centré!
    • Ce n'est pas vraiment un parfaitement raisonnable, s'il utilise l'imaginaire des propriétés CSS (align).
    • Que pensez-vous que je voulais dire avec le commentaire à propos de deviner ce que vous avez fait de mal avec le bouton. Vous n'avez pas de montrer ce que vous avez fait, donc je n'avait pas de commentaires à ce sujet.
    InformationsquelleAutor Jonathan Wood
  4. 0

    Le css est bien, mais de l'OMI, la "bonne" façon de le faire est par le biais d'un fichier css séparé. Même avec le onsubmit qui doivent être séparées par jquery ou js. Pour le bouton de question que j'avais besoin de voir le css de la feuille de style et tout css que vous utilisez. pourrait être n'importe quel nombre de raisons que quelque chose d'autre est primordial que le comportement que vous souhaitez.

    Une astuce css est si l'élément n'est pas se comporter correctement, mettre un 1px solid bordure colorée autour d'elle et puis vous pouvez voir où il est rendu dans le navigateur. Vous pouvez ensuite mettre des bordures autour de l'autre des éléments et de voir où en sont les choses qui se chevauchent ou en poussant un élément de la position que vous voulez.

    InformationsquelleAutor Brian