文本不在小型设备上居中

Text is not centered on small devices

我正在使用 HTML 和 CSS 进行前端挑战，在网站上我有这样的文字：

上图是web视图的截图，我需要在移动设备上打开网站时保持文本水平居中。

当前输出：

正如您在图像中看到的那样，屏幕越小，屏幕左侧的文本就越多

到目前为止我所做的事情：

我看到here and here我可以这样做：

  width:100%;
  display: flex;
  justify-content: center;

所以我已经尝试这样做了：

<p class="top-paragprph colorWhite bold">All your files in one secure location,<br> accessible anywhere.</p>

.top-paragprph{
  font-size: 32px;
  width: 100%;
  display: flex;
  justify-content: center;
}

但它对我不起作用。

根据我的阅读，flex 似乎是一种现代且简单的方法，为什么在我的示例中文本没有居中显示在较小的屏幕尺寸上？

尝试添加 text-align: center; 或者如果您正在使用 bootstrap，请添加 class text-center 您的 <p></p> 标签

https://codepen.io/critingz/pen/PomJRov

.holder {
  display: flex;
  justify-content: center;
}

有一个包含文本的支架 div。 holder div 可以 display: flex;, justify-content: center;

display: flex; 应该放在父元素上，如下所示：

.container{
  width: 100%;
  display: flex;
  justify-content: center;
}

<div class="container">
<p class="top-paragprph colorWhite bold">All your files in one secure location,<br> accessible anywhere.</p>
</div>

让我知道这是否符合您的要求。

p {
  width: max-content;
  margin: auto
}

将宽度设置为 p 元素，然后将边距设置为自动。

假设您想要将段落居中并且您的导航栏也是 100%，我猜图像会超出您的 body 元素并使其看起来不居中。 您可以通过提供图像 max-width: 100%;

来解决此问题