无法在 unbounce 平台上居中固定表格答案

【问题标题】：Can't center fixed form on unbounce platform无法在 unbounce 平台上居中固定表格
【发布时间】：2014-05-06 05:25:07
【问题描述】：

我正在开发 unbounce 着陆页平台。总的来说，它真的很棒，并且让 A/B 测试变得非常容易。它或多或少只是拖放，但您可以添加 css、html、javascript 等。

无论如何，I'm working on creating a fixed signup area on the bottom of the screen（应该会提高转化率），但我遇到了一些麻烦。注册框是在所见即所得的仪表板中创建的，据我所知，它只是为您构建 CSS，当您移动滑块、更改颜色等时。

我可以让整个注册区域一直浮动到底部，但我无法让注册框保持居中。我可以使用边距和定位，但不能使用 align: center 函数。

我尝试过 margin-left: auto; margin-right: auto 和 text-align: center;，但它完全没有任何作用！

当改变屏幕大小时，它不会保持居中。但这是踢球者；文本以width: 100%.为中心没有问题。注册框似乎不尊重任何包装，我认为这可能是问题所在。这是我用来创建这个固定部分的所有 CSS：

 #lp-pom-box-214 {
    top: auto !important;
    display:block;
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    bottom:0px;
    width: 100%;
    align: center;

  }     

 #lp-pom-form-51 {
   top: auto !important;
    display:block;
    width: 100%;
    position:fixed;
    bottom: 25px;
    margin-left: 26%;

  }

  #lp-pom-text-211 {
    top: auto !important;
    display:block;
    position:fixed;
    bottom:75px;
    width: 100%;        
  }

提前非常感谢！这个客户对我真的很好，所以我想为他们做好。我不是一个优秀的编码员，但我非常擅长营销，所以如果你在那个领域需要帮助，请随时给我大喊 :) 这是我知道如何回馈帮助我的人的最佳方式（或社区中的其他任何人）。

再次感谢。

【问题讨论】：

标签： css forms content-management-system center

【解决方案1】：

您不能通过这种方式调整固定定位元素的位置。

固定位置元素相对于视口或浏览器窗口定位。当窗口滚动时，视口不会改变，因此固定定位的元素将完全按照名称所暗示的那样工作，并保持固定在其指定的位置。要定位固定元素，请使用属性 top、right、bottom 和 left

如果你想保持它作为一个固定定位的元素，你可以通过将 top 和 left 设置为 50% 将它垂直和水平居中在页面上，以便容器的左上角在页面内居中，你可以然后使用负值的 margin-top 和 margin-left 来补偿元素宽度和高度的一半，以实现容器中心的真正中心。

【讨论】：

【解决方案2】：

类似this?

如果是，请检查此code

css

.fixed-bottom {
    position:fixed;
    left:0;
    bottom:0;
    padding:10px 0;
    background:#CCC;
    width:100%;
}
.fixed-bottom h1 {
    text-align:center;
}

#lp-pom-button-52 {
display: block;
z-index: 61;
width: 175px;
height: 54px;
line-height: 54px;
behavior: url(/PIE.htc);
border-radius: 8px;
background-color: #ff0000;
background: -webkit-linear-gradient(#ff0000,#e60000);
background: -moz-linear-gradient(#ff0000,#e60000);
background: -ms-linear-gradient(#ff0000,#e60000);
background: -o-linear-gradient(#ff0000,#e60000);
background: linear-gradient(#ff0000,#e60000);
box-shadow: inset 0px 1px 0px #ff4c4c,inset 0 -1px 2px #b30000;
text-shadow: 1px 1px #5c0000;
-pie-background: linear-gradient(#ff0000,#e60000);
color: #fff;
border-style: solid;
border-width: 3px;
border-color: #333333;
font-size: 24px;
font-weight: bold;
font-family: arial;
text-align: center;
background-repeat: no-repeat;
    float:left;
    margin:0 0 0 10px;
}

#lp-pom-form-51 .lp-pom-form-field input[type=text] {
border-style: solid;
border-width: 10px;
border-color: #002c77;
}

a {
color: #ff0000;
text-decoration: none;
}

【讨论】：