Question

我正在处理HTML代码。我需要代码标题位于页面中心。页面标题（标题）包含10个单词。

我正在使用的选项从中间开始，然后向右移动。我需要整体。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <style type="text/css">
    .Titleline {
      position: absolute;
      left: 50%;
      width: 546px;
      height: 74px;
      font-family: TimesNewRomanPSMT;
      font-size: 35px;
      line-height: 1.06;
      color: #222222;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <center class="Titleline">You are one step closer to <br/>the experience of a life time</center>
    </tr>
  </table>


</body>

</html>

你看到句子从中心开始但向右移动。

这可以以某种方式修复。

Answer 1

您的HTML无效。有两个原因：

<center>标记已弃用。（有些浏览器支持它们。）
<center>不能是<tr>的直接后代，它应该是<td>。请改用td的类。

更好的代码将是：

.Titleline {
  /* position: absolute;
  left: 50%;
  width: 546px;
  height: 74px;
  */
  font-family: TimesNewRomanPSMT;
  font-size: 35px;
  line-height: 1.06;
  text-align: center;
}

table {
  width: 100%;
}

<table>
  <tr>
    <td class="Titleline">You are one step closer to <br/>the experience of a life time</td>
  </tr>
</table>

请参阅代码段中的更新代码。请使用<td>的类，并使<table>全宽。另外，请勿不必要地使用position。

Answer 2

有很多问题：

的 <center> is deprecated ;不要使用它。

您的标记无效;的 <center> is not a valid child of <tr> 即可。 <td>和<th>是<tr>唯一有效的子女。

您通过 position: absolute 使用 left: 50% ，这会使您的文字以偏移量开头50％;它没有集中它。

我建议将<center>添加到<td>，并将 text-align: center 添加到.Titleline以集中它。请注意，您.Titleline上还有一个固定的 width ，需要删除。您还需要将width: 100%添加到table，以便占用完整的可用宽度（以便文本可以集中）。这可以在以下示例中看到：

＆＃13;
＆＃13;
.Titleline { font-family: TimesNewRomanPSMT; font-size: 35px; line-height: 1.06; color: #222222; text-align: center; } table { width: 100%; }
＆＃13;
<body> <table> <tr> <td class="Titleline">You are one step closer to <br/>the experience of a life time</td> </tr> </table> </body>
＆＃13;
＆＃13;
＆＃13;

以上显示了如何将文本集中在一个表格中，但我还建议不要使用表格进行布局，因为它们对较小的屏幕支持不佳。我建议您使用类似 <div> 元素的内容来分割您的内容。对于纯文本（例如您的示例），您还应该使用 <p> 标记：

＆＃13;
＆＃13;
.Titleline { font-family: TimesNewRomanPSMT; font-size: 35px; line-height: 1.06; color: #222222; text-align: center; }
＆＃13;
<body> <div> <p class="Titleline">You are one step closer to <br/>the experience of a life time</p> </div> </body>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！：）

Answer 3

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    
    <style type="text/css">
		   .Titleline 
		   {
              position: absolute;

              text-align:center;

    		  width: 546px;
              height: 74px;
              font-family: TimesNewRomanPSMT;
              font-size: 35px;
              line-height: 1.06;    
              color: #222222;
      	  }
     </style>
   </head>
  <body>
  		<table>
  			   <tr>
                  <td class="Titleline">
                      You are one step closer to <br/>the experience of a life time
                  </td>
               </tr>
		</table>		

      
  </body>
</html>

＆＃13;

HTML标题不居中

3 个答案: