【问题标题】:Centering submit button居中提交按钮
【发布时间】:2016-12-27 12:57:29
【问题描述】:

www.Edge-Trainer.com 的“发送我的免费电子书”提交按钮在移动设备中查看时未居中。我尝试将宽度、边距设置为自动、文本居中对齐、显示块和许多其他内容,但我可以不要让它居中。

另一个可能或许多不相关的问题是,如果您向下滚动到 Butt Jumpstart 计划中的 14 天踢,灰色框在白框之外,但应该在里面居中。我也想不通。

任何帮助将不胜感激!

【问题讨论】:

  • 由于您的标记,该按钮基本上不在中心。为了解决这个问题,您只需在表单中添加 padding-left: 5px;

标签: css centering


【解决方案1】:

你可以试试这个..

你必须在你的移动媒体屏幕code..

@media only screen and (max-device-width: 480px) {
    .smallcent{
        position: relative;
        right: 15px;
    }
    .btn_ebook{
        position: relative;
        right: 15px;
    }
}

它是 100% 工作的......

【讨论】:

  • 谢谢!效果很好!如果我把它放在我的styles.css部分下@media only screen and (min-width: 320px) and (max-width: 479px),它不起作用,但如果我直接把它放到我的索引页它确实有效。我不明白为什么。那是我应该放的地方吗?
  • 我将到styles.css 的链接移到了样式表的末尾,现在它可以工作了。谢谢。
【解决方案2】:

问题与按钮的大小有关。随着屏幕变小,表格也会变小。但是,按钮没有预定义的宽度,只是文本的大小+您给它的填充。

有两种方法可以解决这个问题,第一种是定义精确的宽度,例如 75%,在这种情况下按钮会变小并保持居中对齐。

另一种方法是对较小的设备使用媒体查询,并在每次屏幕尺寸达到一定宽度时更改字体大小。

希望这会有所帮助!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-08-05
    • 2014-08-04
    • 2016-11-30
    • 2017-12-05
    • 2015-01-04
    • 2020-05-22
    • 1970-01-01
    • 2015-02-05
    相关资源
    最近更新 更多