Centrage modal dans twitter bootstrap

Je ne peux pas le centre de mon modal dans twitter bootstrap avec différentes tailles. Vous pouvez voir en direct exemple ici et ici. (cliquez sur la photo ou le "Rapport de cette image"). Vous verrez que le modal est là le travail comme un charme, mais il n'est pas centrée horizontalement. J'ai tout essayé: les marges, float, text-align et même <center>

.modal:

.modal {
      position: fixed;
      top: 10%;
      z-index: 1050;
      width: auto;
      background-color: #ffffff;
      border: 1px solid #999;
      border: 1px solid rgba(0, 0, 0, 0.3);
      *border: 1px solid #999;
      -webkit-border-radius: 6px;
         -moz-border-radius: 6px;
              border-radius: 6px;
      outline: none;
      -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
         -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
              box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
      -webkit-background-clip: padding-box;
         -moz-background-clip: padding-box;
              background-clip: padding-box;
    }

.modal-body:

.modal-body {
 margin: 0 auto 0 auto;
  position: relative;
  padding: 15px;
  overflow-y: auto;
}
Voir: stackoverflow.com/a/53373717/7186739

OriginalL'auteur user2462794 | 2013-08-15

  1. 11

    Je sais que c'est un peu tard, mais j'ai trouvé la solution à tous les problèmes avec centrage de la Modal Bootstrap avec différentes hauteurs de la norme (un).

    $("#yourModal").modal('show').css({
    'margin-top': function () { //vertical centering
        return -($(this).height() / 2);
    },
    'margin-left': function () { //Horizontal centering
        return -($(this).width() / 2);
    }
});
    J'ai aimé cette réponse mieux. Il se sent moins intrusive

    OriginalL'auteur alex89x

  2. 6

    Une solution qui fonctionne indépendamment de l'enfant, la taille de l'élément (dans ce cas, le modal). Peut également être utilisé pour centrer verticalement.

    .centered {
    left: 50%;
    transform: translateX(-50%);
}

    Essentiellement ce que nous faisons ici, c'est de pousser l'élément de droite par la moitié de la largeur de son conteneur parent. Dans le cas de la modale de la société mère (devrait) être le corps. La transformation de la propriété est le tirant de l'élément de gauche par la moitié de ses propre largeur.

    Edit: centrer verticalement

    .centered {
    top: 50%;
    transform: translateY(-50%);
}

    Remarque: je pense que le centrage horizontal ne fonctionne que si la hauteur/largeur de la société mère sont les mêmes, que le % est donné par les parents de la largeur. Si elles ne sont pas la même chose, alors utilisez simplement le parent hauteur.

    OriginalL'auteur Ty93

  3. 4

    Ce n'est pas le modal corps qui a besoin de centrage, c'est l'ensemble du modal. Depuis qu'a fixé le positionnement, vous pourriez le faire avec CSS et jQuery (depuis jQuery est déjà utilisé):

    CSS:

    .modal { left: 50%; }

    jQuery:

    $('.modal').each(function(){
  var modalWidth = $(this).width(),
      modalMargin = '-' + (modalWidth/2) + 'px!important';
  $(this).css('margin-left',modalMargin);
});

    Alternativement, il est possible avec juste CSS:

    .modal { 
  width: 100%;
  left: 0;
  background-color: transparent; }

.modal-body { 
  display: inline-block; 
  background-color: #FFF; }

.modal img { min-width: none!important; }

    OriginalL'auteur Coop

  4. 2

    Alternative à @Coop de réponse. Comme vous avez un texte à largeur fixe de la zone de là, vous pouvez définir la largeur de la modal et l'utilisation des marges négatives plutôt que de jquery.

    .modal {
  left:50%;
  width:444px;
  margin-left:-222px;
}

    Dans votre code actuel, il n'y a rien qui va permettre à la modale de centre.

    Je vais ajouter une variante de ce que ma propre réponse qui va travailler pour toute la taille de l'élément plutôt que de coder en dur une largeur ou de la marge

    OriginalL'auteur Kami

  5. 2

    Vous pouvez utiliser jquery pour reproduire ce behaivor:

    left: 50%;
width: 560px;
margin-left: -280px;

    Calcul de la largeur de la div et assigner les css 

    $(document).ready(function () {

     var modalWidth = $('#myModal').width();
     $('#myModal').css("left", "50%");
     $('#myModal').css("width", modalWidth);
     $('#myModal').css("margin", (modalWidth/2)*-1);

});

    OriginalL'auteur xzegga

  6. 1
     .modal-dialog 
  {
    padding-top: 15%;
  }

    OriginalL'auteur Hardik Sondagar