Align text of a div center respect to the page

Question

Can someone resolve my problem? I have an header on my page with a central div and another div on the right side. I want to align the text of the H1 central respect the entire page, how can i do it?

<header>
    <div id="date"> 
        <p><script language="javascript" type="text/javascript"> WriteDate(true);</script></p>
        <canvas id="canvas" width="130" height="130"></canvas>
    </div>
    <div style="float:center;">
        <h1>Sito di Graizzaro Matteo</h1>
    </div>
</header>

The style of my page is:

* {
    box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6 { 
    text-align: center;    
}
#date{
    text-align: right;
    float: right;
}

Thanks in advance for the help.

Answer 1

date has some width that will compromise centering the text. You can:

• Give a negative left margin to virtually reduce its width to null

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}

#date {
  float: right;
  margin-left:-100%;
}
canvas {border:solid;}

<header>
  <div id="date">
    <p>01/01/01
    </p>
    <canvas id="canvas" width="130" height="130"></canvas>
  </div>
  <div style="text-align:center;">
    <h1>Sito di Graizzaro Matteo</h1>
  </div>
</header>

• or set its width to 0 and reset direction to let text overflow to the left

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}

#date {
  direction:rtl;
  float: right;
  width:0
}
canvas {border:solid;}

<header>
  <div id="date">
    <p>01/01/01
    </p>
    <canvas id="canvas" width="130" height="130"></canvas>
  </div>
  <div style="text-align:center;">
    <h1>Sito di Graizzaro Matteo</h1>
  </div>
</header>

• set it in absolute position.

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}

#date {
  position:absolute;
  right:0;
}
canvas {border:solid;}

<header>
  <div id="date">
    <p>01/01/01
    </p>
    <canvas id="canvas" width="130" height="130"></canvas>
  </div>
  <div style="text-align:center;">
    <h1>Sito di Graizzaro Matteo</h1>
  </div>
</header>

In any case float:center is not valid, you can either:

• use text-align:center; or

• display:table;margin:auto if container has to wrap on the text's width.

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}

#date {
  direction:rtl;
  float: right;
  width:0
}
canvas {border:solid;}

<header>
  <div id="date">
    <p>01/01/01
    </p>
    <canvas id="canvas" width="130" height="130"></canvas>
  </div>
  <div style="display:table;margin:auto;background:gray;">
    <h1>Sito di Graizzaro Matteo</h1>
  </div>
</header>