在twitter-bootstrap中居模态

Question

我无法将我的模态集中在各种大小的twitter-bootstrap中.您可以在此处 和此处查看实时示例.(只需点击图片或"报告此图片").你会看到模态就像魅力一样,但它不是水平居中的.我尝试了一切:边距,浮动,文本对齐甚至<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体:

.modal-body {
 margin: 0 auto 0 auto;
  position: relative;
  padding: 15px;
  overflow-y: auto;
}

Answer 1

我知道这有点晚了,但我找到了解决所有问题的方法,将Bootstrap Modal置于不同于标准(一个)的高度.

$("#yourModal").modal('show').css({
    'margin-top': function () { //vertical centering
        return -($(this).height() / 2);
    },
    'margin-left': function () { //Horizontal centering
        return -($(this).width() / 2);
    }
});

Answer 2

无论子元素大小(在本例中为模态)都可以使用的解决方案.也可以用于垂直居中.

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

基本上我们在这里做的是将元素向右推动父容器宽度的一半.在模态的情况下,父母将(应该)是身体.transform属性是将元素拉动其自身宽度的一半.

编辑:垂直居中

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

注意:我认为水平居中只有在父级的高度/宽度相同时才有效,因为%来自父级宽度.如果它们不相同,那么只需使用父高度.

Answer 3

需要居中的不是模态体，而是整体模态。由于它具有固定的定位，因此您可以使用 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; }