css - 无法在退弹平台上将固定形式居中

标签 css forms content-management-system center

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

无论如何,我正在努力在屏幕底部创建一个固定的注册区域(应该会提高转化率),但我遇到了一些麻烦。注册框是在所见即所得的仪表板中创建的,据我所知,它只是在您移动 slider 、更改颜色等时为您构建 CSS。

我可以让整个注册区域 float 到底部,但我无法让注册框保持居中。我可以使用边距和定位,但不能使用 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%;        
  }

提前致谢!!这个客户对我真的很好,所以我想为他们做好。我不是一个伟大的编码员,但我非常擅长营销,所以如果你在那个领域需要帮助,请随时告诉我 :) 这是我知道如何回馈帮助我的人的最好方式(或社区中与此相关的任何其他人)。

再次感谢。

最佳答案

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

固定位置元素相对于视口(viewport)或浏览器窗口定位。当窗口滚动时,视口(viewport)不会改变,因此固定定位的元素将完全按照名称所暗示的那样执行并保持固定在其分配的位置。要定位固定元素,您可以使用属性 top、right、bottom 和 left

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

关于css - 无法在退弹平台上将固定形式居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23486553/

相关文章:

jquery - 在 jQuery Mobile 中创建选项卡

android - Android App内容管理系统

javascript - 使用 Gatsby Js 在单击 anchor 时 react 切换事件类

html - Mailchimp 表单未提交

带有屏幕结果的 PHP 测验

.net - 在 .NET 2.0 中使用 "Remember Me"功能进行身份验证

content-management-system - TYPO3 - 如何在生成的 html 页面的标题中设置 <base> 标签?

php - 使 CMS 模板在普通网站上工作需要什么

javascript - 如何使用 getElementById 检查长度

javascript - Jquery - addClass 中的多个设置