无法在 HTML/CSS 中居中文本答案

【问题标题】：Cannot center text in HTML/CSS无法在 HTML/CSS 中居中文本
【发布时间】：2017-09-24 16:42:02
【问题描述】：

问题是（您可以在下图中看到）“doner”、“Wallet”和“Amount”不在页面中心。

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

我能找到的唯一问题是当我在谷歌浏览器上检查元素时。当我将鼠标悬停在<div class="container">（div class="learn-more"> 下方的那个）上时，它显示 div 容器在右侧较宽，但我找不到原因！

感谢您的帮助！如果您需要任何澄清，请询问，我在网上找不到任何可以解决我的问题的东西，所以我来到这里。

这也是我的意思的图片：

【问题讨论】：

请查看如何制作minimal reproducible example。问题不应该需要访问外部站点，因为它们往往会随着时间的推移而变化并且不受该站点的控制，最终使问题变得毫无意义。
你说得对，我很难展示一段代码，因为老实说我不知道出了什么问题，而且把这一切都放在我的问题中看起来很糟糕。下次我一定会这样做，谢谢！

【解决方案1】：

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

以下是您在构建 HTML 时应遵循的 3rd Bootstrap 文档中的前三个规则：

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

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

【讨论】：

【解决方案2】：

将您想要居中的内容放在一个 div 中，例如

<div class="box">your content...</div>

在你的css文件中添加这个：

.box{

display:inline-block;
position:relative;
left:50%;
transform:translateX(-50%);

}

您还可以为您的 3 个标题使用 float left，并使用 text-center 属性为三个标题设置相同的宽度和高度

【讨论】：