将 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 几乎减少为空

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

Answer 2

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

在标题元素上

Answer 3

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

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

您可以做两件事来解决这个问题：首先，不要将日期浮动到右侧，而是将其文本对齐到右侧，并在标题上使用负上边距将其向上拉。

或者，不要将日期浮动到右侧，而是使用绝对定位，将 right 值设为 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;} 

小提琴：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

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

#date {
    position: relative;
}

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