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>

将其设置为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>

将div中心的文本与页面对齐

6 个答案: