Question

观察以下HTML和CSS代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    p
    {
      text-align: center;
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <p>
    [·200·400·600·]<br>
    [·100·][·300·][·500·][·700·800·900·]<br>
    [·50·][·150·][·250·][·350·][·450·][·550·][·650·][·750·][·850·][·950·1000·1050·]<br>
    [·25·50·] → [·75·100·] → [·125·150·] → [·175·200·] → [·225·250·] → [·275·300·] → [·325·350·] → [·375·400·] → [·425·450·] → [·475·500·] → [·525·550·] → [·575·600·] → [·625·650·] → [·675·700·] → [·725·750·] → [·775·800·] → [·825·850·] → [·875·900·] → [·925·950·] → [·975·1000·] → [·1025·1050·] → [·1075·1100·1125·]
  </p>
</body>
</html>

请注意，当我放大得足够远时，整棵树看起来很漂亮并居中：（对不起，它太小了，但你可以清楚地看到结构）

现在，请注意当你放大时，它不会再保持居中;即使它没有换行，较低的等级也会从左侧“推”出来：

无论我的缩放程度如何，我可以在CSS或HTML中更改哪些内容始终使整个树居中？

编辑：关键是，每当我放大时，我仍然应该能够一直水平滚动以便看到树的其余部分;使用此处实现的解决方案：Can overflow text be centered?，一些较长的文本会在页面左侧被截断。

Answer 1

制作p内嵌块

<强>为什么吗

因为默认情况下，p是一个块元素，并且此类元素的容器宽度为100％（在您的情况下为正文）。因此，对齐工作正常，但您正面临溢出。通过使元素内联块，它将适合其内容的宽度，您将获得所需的结果。

p {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}

<p>
  [·200·400·600·]<br> [·100·][·300·][·500·][·700·800·900·]
  <br> [·50·][·150·][·250·][·350·][·450·][·550·][·650·][·750·][·850·][·950·1000·1050·]
  <br> [·25·50·] → [·75·100·] → [·125·150·] → [·175·200·] → [·225·250·] → [·275·300·] → [·325·350·] → [·375·400·] → [·425·450·] → [·475·500·] → [·525·550·] → [·575·600·] → [·625·650·] → [·675·700·] → [·725·750·] → [·775·800·] → [·825·850·] → [·875·900·]
  → [·925·950·] → [·975·1000·] → [·1025·1050·] → [·1075·1100·1125·]
</p>

CSS / HTML中心段落内容基于最长宽度字符串

1 个答案: