How can I align my text my 1400px wide header is causing a problem

Question

I am using a 1400px header (the size of the width of my image). Because of my header my following text is not displayed instead of my page

 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>

I tried flex, text align. Nothing to do I can not center my text in the middle of my page

Answer 1

Is this what you had in mind?

 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 only has an effect if there's space left over after your flex items have flexed to absorb the free space. It doesn't align the text itself.

Change justify-content:center; to text-align:center;

For more info check out this answer

Answer 3

If you want to center every line of text to the center of parent element use

text-align: center

 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>

Simplest way to center a div use using margin: auto

 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>