如何對齊我的文本我的 1400px 寬 header 導致問題

Question

我正在使用 1400px header （我的圖像寬度的大小）。 由於我的 header 我的以下文本沒有顯示而不是我的頁面

 body { background-color: blue; }.infos { display: flex; justify-content: center; color: white; } header { width: 1400px; height: 787px; background-color: black; }

 <link href="https://unpkg.com/tailwindcss@%5E1.0/dist/base.min.css" rel="stylesheet" /> <header></header> <div class="infos"> <p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p> </div>

我試過 flex，文本對齊。 無事可做 我無法將文本置於頁面中間

Answer 1

這是你的想法嗎？

 body { background-color: blue; }.infos { display: flex; justify-content: center; color: white; width:1400px; margin:0 auto; } header { width: 1400px; height: 787px; background-color: black; margin:0 auto; }

 <link href="https://unpkg.com/tailwindcss@%5E1.0/dist/base.min.css" rel="stylesheet" /> <header></header> <div class="infos"> <p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p> </div>

Answer 2

justify-content僅在您的彈性項目彎曲以吸收可用空間后剩余空間時才有效。 它不會對齊文本本身。

更改justify-content:center; 到text-align:center;

有關更多信息，請查看此答案

Answer 3

如果要將每一行文本居中到父元素的中心，請使用

文本對齊：居中

 body { background-color: blue; } header { width: 1400px; height: 787px; background-color: black; }.infos { text-align: center; }

 <link href="https://unpkg.com/tailwindcss@%5E1.0/dist/base.min.css" rel="stylesheet" /> <header></header> <div class="infos"> <p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p> </div>

使用邊距使 div 居中的最簡單方法：自動

 body { background-color: blue; } header { width: 1400px; height: 787px; background-color: black; }.infos { width: 50%; margin: auto; }

 <link href="https://unpkg.com/tailwindcss@%5E1.0/dist/base.min.css" rel="stylesheet" /> <header></header> <div class="infos"> <p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p> </div>