CSS / HTML Center Paragraph contents Based on Longest Width String

Question

Observe the following HTML and CSS code:

<!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>

Notice how, when I'm zoomed far enough out, the whole tree looks nice and centered: (Sorry it's so tiny, but you can clearly see the structure)

Now, notice how when you zoom in, it doesn't really stay centered anymore; even though it doesn't wrap, the lower levels get "pushed" from the left side:

What can I change in either the CSS or HTML to always keep the whole tree centered, regardless of my level of zoom?

Edit: The point is, whenever I zoom in, I should still be able to horizontally scroll all the way left in order to see the remainder of the tree; using the solution implemented here: Can overflow text be centered?, some of the longer text gets cut off on the page to the left side.

Secondly, all div's inside this `p` should be `text-align:center` in css. — Akshay Khandelwal, Mar 11 '18 at 20:37
Possible duplicate of [Can overflow text be centered?](https://stackoverflow.com/questions/6618648/can-overflow-text-be-centered) — Obsidian Age, Mar 11 '18 at 20:43
Not quite; upon zooming in far enough using that solution, some of the longer text instead gets cut off to the left. — joejoejoejoe4, Mar 11 '18 at 20:59
@AkshayKhandelwal `all div's inside this p should be` --> as a side note : div are not allowed inside p tag. https://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it — Temani Afif, Mar 11 '18 at 22:14

score 1 · Accepted Answer · answered Mar 11 '18 at 21:16

Make the p inline-block

Why?

Because by default p is a block element and such element has 100% width of its container (the body in your case). So the alignment is working fine but you are facing an overflow. By making the element inline-block it will fit the width of its content and you will have the desired result.

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 Center Paragraph contents Based on Longest Width String

1 Answers1