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

Please clarify what you mean by centering? Do you mean you want to align the text vertically and horizontally on the screen? — Matthew Dangle, Jan 15 '21 at 16:55
If none of the answers satisfy, may be you can try to draw what is required in paint and add to the question. — Ajith Gopi, Jan 15 '21 at 17:06

score 0 · Accepted Answer · answered Jan 15 '21 at 16:58

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>

score 0 · Answer 2 · answered Jan 15 '21 at 17:00

0

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

answered Jan 15 '21 at 17:00

XLIME

185
6

score 0 · Answer 3 · answered Jan 15 '21 at 17:04

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>

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

3 Answers3