5

我无法将我的模态集中在各种尺寸的 twitter-bootstrap 中。您可以在此处 和此处查看实时示例。（只需点击图片或“举报此图片”）。你会看到模态框像魅力一样工作，但它不是水平居中的。我尝试了一切：边距、浮动、文本对齐，甚至<center>

.模态：

.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;
}
4

6 回答 6

13

我知道这有点晚了，但我找到了解决所有问题的解决方案，将 Bootstrap 模态与标准（一个）不同的高度居中。

$("#yourModal").modal('show').css({
    'margin-top': function () { //vertical centering
        return -($(this).height() / 2);
    },
    'margin-left': function () { //Horizontal centering
        return -($(this).width() / 2);
    }
});
于 2014-02-13T09:26:56.210 回答
8

一个不管子元素大小（在本例中为模态）的解决方案。也可用于垂直居中。

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

本质上，我们在这里所做的是将元素向右推父容器宽度的一半。在模态的情况下，父母将（应该）是身体。transform 属性是将元素向左拉出其自身宽度的一半。

编辑：垂直居中

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

注意：我认为水平居中仅在父级的高度/宽度相同时才有效，因为 % 来自父级宽度。如果它们不相同，则只需使用父高度。

于 2015-09-02T15:32:21.210 回答
4

需要居中的不是模态体，而是整体模态。因为它有固定的定位，你可以用 CSS 和 jQuery 来做（因为 jQuery 已经被使用了）：

CSS：

.modal { left: 50%; }

jQuery：

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

或者，仅使用 CSS 是可能的：

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

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

.modal img { min-width: none!important; }
于 2013-08-15T16:38:37.340 回答
2

替代@Coop 的答案。由于那里有一个固定宽度的文本区域，因此您可以设置模式的宽度并使用负边距而不是 jquery。

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

在您当前的代码中，没有任何东西可以让模态居中。

于 2013-08-15T16:42:56.953 回答
2

您可以使用 jquery 重现此行为：

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

计算 div 的宽度并分配 css

$(document).ready(function () {

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

});
于 2013-08-15T16:49:02.823 回答
1 
 .modal-dialog 
  {
    padding-top: 15%;
  }
于 2013-12-27T06:56:37.683 回答