居中的文本框，周圍有邊框

Question

 body { display: flex; align-items: center; background-color: black; } h1 { font-size: 8rem; border: 0.1em solid white; color: white; text-justify: center; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; flex: 1; display: inline-flex; justify-content: center; } /* Want this: ------------- |Hello world| ------------- On all screens big and small, portrait or landscape. */ 

 <h1>Hello World</h1> 

我想我需要根據屏幕的寬度來更改文本大小，並且我不知道如何在框中顯示文本的正當性。 此外，我希望邊框位於文本周圍，而不像我們看到的那樣擁抱可用寬度： https : //s-ckwvolnvzl.now.sh/

尋找一個最小的解決方案，所以如果文本調整大小太困難了，那就算了。 謝謝！

Answer 1

您可以使用視口單位使文本可調整大小。

我在主體中添加了justify-content屬性以使文本居中，並將h1更改為display: inline-block以確保邊框僅圍繞文本。

 body { display: flex; align-items: center; background-color: black; justify-content: center; } h1 { font-size: 15vw; /* change this value as you need */ border: 0.1em solid white; color: white; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; display: inline-block; } /* Want this: ------------- |Hello world| ------------- On all screens big and small, portrait or landscape. */ 

 <h1>Hello World</h1>