html - 将 div 中心的文本相对于页面对齐

Question

有人可以解决我的问题吗？我的页面上有一个标题，中间有一个 div，右侧有另一个 div。我想将 H1 中心的文本对齐整个页面，我该怎么做？

<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>

我的页面样式是:

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

在此先感谢您的帮助。

Answer 1

date 的宽度会影响文本的居中。您可以:

• 给一个负的left margin 来实际上减少它的width 到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>

• 或者设置它的width为0并重置direction让文字向左溢出

* {
  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>

• 将其设置为绝对 位置。

* {
  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>

在任何情况下 float:center 都无效，您可以:

• 使用text-align:center; 或

• display:table;margin:auto 如果容器必须按文本的宽度换行。

* {
  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>