css - 无法在 HTML/CSS 中将文本居中

Question

问题是(您可以在下图中看到)“doner”、“Wallet”和“Amount”不在页面中央。

我试过更改边距和填充以及移动 div 等，但似乎没有任何效果，我不明白哪里出了问题或如何解决它。 (很难在代码片段中看到，因为它不是全屏的，所以我只提供一个指向 HTML here 的链接)

我唯一能找到的问题是当我检查谷歌浏览器上的元素时。当我将鼠标悬停在 <div class="container"> 上时(下面的div class="learn-more">)显示右边的div容器比较宽，但是我找不到原因!

感谢您的帮助!如果您需要任何说明，请询问，我在网上找不到任何可以解决我的问题的东西，所以我来了。

这也是我的意思的图片:

Answer 1

您的代码的根本问题是标记。您正在使用 Bootstrap 并将一些 div 直接放入容器中，然后将另一个容器放入该 div 中。明白我的意思:

以下是构建 HTML 时应遵循的第 3 Bootstrap 文档中的前三个规则:

• 行必须放在 .container(固定宽度)或.container-fluid(全宽)用于正确对齐和填充。
• 使用行创建水平列组。
• 内容应该放在列中，并且只能是列行的直接子级。

因此，我的建议是修改您的 HTML 布局并按预期使用 Bootstrap，而不是应用一些技巧。

从重新排列容器开始，将内容放在列内，所有包装器都在容器外或列内。