居中提交按钮答案

【问题标题】：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%，在这种情况下按钮会变小并保持居中对齐。

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

希望这会有所帮助！

【讨论】：