将 div 的文本相对于页面居中对齐

Question

有人可以解决我的问题吗？我的页面上有一个 header，中间有一个 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

display: block;
width: 100%;
margin: 0 auto;
float: none;

在标题元素上

Answer 2

float: center 不是东西。你想要 text-align: center.

问题是，它仍然不会完全位于中心 - 日期会推迟它。

这里有两件事可以解决这个问题：首先，不要将日期向右浮动，text-align它向右浮动，并在标题上使用负上边距将其向上拉.

或者，不是将日期向右浮动，而是使用 right 值为 0 的绝对定位使其位于右侧，并且您的 header 将正确居中。

Answer 3

我建议使用 id 而不是 h1，但是通过相对定位，您可以将文本放在您想要调整顶部和左侧参数的任何位置。

#date {
    position: relative;
}

.h1 {
    position: absolute;
    left: 500;
    top: 0;
}

Answer 4

HTML:

<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>
        <h1>Sito di Graizzaro Matteo</h1>
    </div>
</header>

CSS:

 // html and body can be other wrapper of the title
 // the important thing there is the "position:relative"
 html,body {
   height: 100%;
   width: 100%;
   position: relative }
h1 {
   margin: 0;
   width: 100%;
   position: absolute;               
   top: 50%;      
   font-size: 40px;
   margin-top: -40px;
   transform: translate(0, -50%);
   text-align: center;}

Fiddle: https://jsfiddle.net/nu35jhob/2/

Answer 5

您可以尝试以下方法

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

<header>
    <div id="date"> 
        <p><script language="javascript" type="text/javascript"> document.write("12-Dec-2015 12:15:11");</script></p>
        <canvas id="canvas" width="130" height="130"></canvas>
    </div>
    <div style="position: absolute; width: 100%;">
        <h1>Sito di Graizzaro Matteo</h1>
    </div>
</header>

Answer 6

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>

设置在absoluteposition.

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

将 div 的文本相对于页面居中对齐

Align text of a div center respect to the page

html

css

center

alignment