Sorry if this is a silly question! I’m beginning to design my website and learning HTML and CSS and this has stumped me a little bit. Not sure if what I’m trying is correct.

I’m making a side banner, kind of like a physical media obi strip, on my webpage – where some of the text is in Japanese – and therefore the text is aligned vertically.

p {
  writing-mode: vertical-lr;
  text-orientation: upright;
  color: #fe87b3;
  font-family: "Helvetica";
  font-size: 18px;
}

Easy enough! But when I do this, and align the font to the centre of the page, the text is also centered within its rows (bad phrasing, I’m aware!). I’d like all the text to be aligned from the top of the where it is supposed to begin, rather than this;

visual depiction of previously described issue issue

I’m sure there’s something I’m missing, but I’m not super bright at this (obviously) and I just thought that this might hopefully help someone else in the future too.
Any help would be greatly appreciated!

I tried;

• vertical-align: super/top/text-top;
• position: top/relative;

There may have been others but I have forgotten unfortunately. None of the above appear to do anything in my case. 🙁