2

我的网站上有一个弹出式联系表格，它几乎居中，但显得有点太高而且太靠右了。

这是它的CSS：

#fg_formContainer
{
   height:410px;
   width:545px;
   background:#FFFFFF;
   border:1px solid #000;
   padding:0;
   position:absolute;
   z-index:999;
   cursor:default;   
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;   
display:none;
}

您可以访问 envisionlocal[dot]com 并单击“获取联系”文本以查看弹出表单。提前致谢！

4

6 回答 6

1

您目前拥有：

display: block;
top: 174px;
left: 519px;

要将其居中，将 left 更改为 50% 并将 margin-left 设置为容器宽度的 1/2 (545 px)

所以，

display: block;
top: 174px;
left: 50%;
margin-left:-272px;
于 2013-05-22T18:47:40.420 回答
1

您正在使用绝对定位并将特定像素值设置为top:和left:属性。使这些值居中应该是 50%。这会产生问题，因为属性top:和left:是分别从它们被应用到的元素的上边缘和左边缘计算的。要将元素“伪造”为从其中心计算 50%，只需添加 amargin-top:和margin-left:分别等于该元素宽度和高度的一半。

添加以下规则以水平和垂直居中打扰。

display: block;
top: 50%;
left: 50%;
margin-left: -272px;
margin-top: -205px;

编辑：

参考您在下面的评论以及对其他人答案的评论，这与我的类似。您的一些样式正在内联应用。

你的容器 div：<div id="fg_formContainer" style="display: block; top: 201px; left: 645px; margin-left: -272px; margin-top: -205px;">

如果您将top:和left:值更改为 50%，我的修复将适用于您。

此外...这些样式应该应用于您在上面发布的 CSS 块。它们不应该首先内联应用。

于 2013-05-22T18:48:13.533 回答
0

昨天我为朋友做了这个。这可能会帮助你。

演示

HTML：

<div id="fblightbox">
  <div class="fblightbox-wrap">
    <div class="fblightbox-header">
      <h3>This header is just awesome xD</h3>
    </div>
    <div class="fblightbox-content">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <div class="fblightbox-footer">
      <a href="#" class="fbbutton">Continue</a>
      <a href="#" id="close" class="fbbutton">Close</a>
    </div>
  </div>
</div>
<div class="overlay"></div>

<div class="demo">
  <a id="launch" class="fbbutton" href="#">Launch Popup</a>
</div>

CSS：

*{
  margin:0;
  padding:0;
}
#fblightbox{
  background: rgba(82, 82, 82, .7);
  color: #333;
  font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
  border-radius: 8px;
  padding:10px;
  width: 575px;
  position: fixed;
  left:50%;
  top:50%;
  z-index: 99999;
  display:none;
}
.fblightbox-wrap{
  border: 1px solid #3B5998;
}
.fblightbox-header{
  background:#6C83B8;
  border-bottom: 1px solid #29447E;
  color: #fff;
  font-size: 14px;
  padding:5px;
}
.fblightbox-header h3{
  font-size:14px;
}
.fblightbox-content{
  background:#fff;
  font-size: 12px;
  padding:10px;
}
.fblightbox-footer{
  background: #f2f2f2;
  border-top: 1px solid #ccc;
  color: #333;
  padding: 10px;
  text-align:right;
}
.fbbutton{
  text-decoration:none;
  color:#fff;
  font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
  font-size: 13px;
  border-style: solid;
  background-image: url(http://i.imgur.com/tu8qPWG.png);
  cursor: pointer;
  font-weight: bold;
  padding: 4px 8px 4px 8px;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
  border-width: 1px;
  margin-left: 3px;
  background-position: 125px 235px;
  border-color: #29447E #29447E #1A356E;
  line-height: normal !important;
  display: inline-block;
}
.overlay{
  background: rgba(0,0,0,0.2);
  position:fixed;
  width:100%;
  height: 100%;
  z-index: 99;
  display:none;
}

.demo{
  padding:30px 50px;
}

JS：

var fblightbox = $('#fblightbox');
fblightbox.css({'margin-left':'-'+(fblightbox.width()/2)+'px','margin-top':'-'+(fblightbox.height()/2)+'px'});

$("#launch").click(function() {
  $('.overlay').fadeIn();
  fblightbox.fadeIn();
});
$("#close").click(function() {
  $('.overlay').fadeOut();
  fblightbox.fadeOut();
});
于 2013-05-22T19:10:06.213 回答
0

在您的 JS 文件http://www.envisionlocal.com/scripts/fg_moveable_popup.js中，您需要使用对象的实际宽度和高度来更新函数的宽度和高度。

这段代码在这里：

var pt = window.center({ 宽度: 390, 高度: 480 });

应该：

var pt = window.center({ 宽度: 410, 高度: 545 });

我相信这应该可以解决问题。您的 js 函数 fg_popup_form 正在为您处理中心。它运行这个名为 window.center() 的函数，该函数使您的弹出窗口居中。但是，如果您没有输入弹出元素的正确宽度和高度，它将无法正确定位自身。

是的，你可以通过 CSS 以不同的方式做到这一点，但你的 JS 已经准备好实现这一点。

于 2013-05-22T18:53:39.850 回答
-1

With jQuery you could do:

jQuery.fn.centerThat = function () {
    this.css('position','absolute');
    this.css('top', Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
        $(window).scrollTop()) + 'px');
    this.css('left', Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
        $(window).scrollLeft()) + 'px');
    return this;
};

Now you can use this function to center any element in the window, like this:

$('#fg_formContainer').centerThat();
于 2013-05-22T19:04:57.233 回答
-2

添加vertical-align: middle到垂直居中和margin-left:auto, margin-right:auto水平居中

vertical-align: middle;
margin-left:auto; 
margin-right:auto;
于 2013-05-22T18:51:06.880 回答