如何对齐我的文本我的 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>