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

• 将其置于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> 

无论如何， 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

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

#date {
    position: relative;
}

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

Answer 5

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 6

您可以尝试以下

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