<input> display:block à l'intérieur d'un text-align:center div

:

<div id="parentdiv" style="text-align:center;width:600px;margin:auto;">
  <input type="button" value="push me" />
</div>

Le bouton est aligné sur le centre de la fenêtre du navigateur (comme souhaité) dans FF, Chrome, IE7 et IE8.

Mais, ajouter "display:block" pour le bouton:

<div id="parentdiv" style="text-align:center;width:600px;margin:auto;">
  <input type="button" style="display:block;" value="push me" />
</div>

Le bouton est aligné au centre dans IE7 et est pas aligné sur le centre de dans FF, Chrome et IE8.

Pourquoi? Et un bouton (ou de tout <input>) avec display:block être aligné au centre, d'une certaine façon? (autres qu'à l'aide de <center> - qui fonctionne sur tous les navigateurs mentionnés, d'ailleurs - mais il est "interdit"...)

OriginalL'auteur Yuval A. | 2011-01-15

  1. 10

    De cette façon, il peut travailler:

    <input type="button" style="width:100px;margin:0 auto;display:block;" value="push me" />

    À la force d'un bloc d'entrée (à l'origine display:inline) pour être centré, vous devez définir une largeur fixe et ensuite la marge de 0 auto 😉

    n'a pas travaillé sur ie9 et chrome!

    OriginalL'auteur stecb

  2. 1

    de la css standard:

    Cette propriété décrit la procédure de contenu en ligne d'un bloc sont alignés horizontalement

    ainsi, lorsque vos éléments (peu importe ce qu'ils sont, vrd, espaces, entrées, etc.) sont en ligne, text-align a une incidence sur eux, et lorsqu'ils display:block, par définition standard, text-align va pas aligner

    vous pouvez résoudre ce problème en définissant margin:0 auto et de la fixation de la largeur, comme steweb suggéré, ou bien (selon vos besoins):

    <input type="button" style="display:inline-block;" value="push me" />
    Je peux pas tester sous IE en ce moment sur mon mac.. mais je ne me souviens pas si ça fonctionne sur IE<8.. je me trompe?
    je n'ai pas vraiment de soins si elle travaille dans ie6, et il faut travailler dans ie7. ne sais pas si.
    Je ne m'inquiète pas trop sur ie6 🙂 ..si cela ne fonctionne pas dans IE7 pourrait être un "problème" coz malheureusement beaucoup de gens sont encore à l'utiliser
    n'a pas travaillé sur ie9 et chrome!
    href="http://jsfiddle.net/QN2qu/" >jsfiddle.net/QN2qu, fonctionne avec ie9 et chrome. Avant de vous downvote et de faire des commentaires inutiles vérifier avec un bon exemple, et de fournir la preuve de toute réclamation que vous faites.

    OriginalL'auteur davin

  3. 0

    Éléments qui sont affichés comme les blocs sont centrés avec auto marges. Le text-align de propriété ne devrait centre de inline enfants. Internet Explorer a des bugs qui entoure cette.

    OriginalL'auteur Quentin