Question

Html文件：

<html>
    <head>
        <content>...</content>
    </head>

    <body>
        <p>My Text</p>
    </body>
</html>

如果页面宽度发生变化或重新调整页面大小，如何使p标签与中间对齐。

Answer 1

尝试使用全宽text-align到center：

p {
    text-align: center; 
    width: 100%;
}

希望这有帮助。

＆＃13;

p {
    text-align: center; 
    width: 100%;
}

＆＃13;

<html>
  <head></head>
  <body>
    <p style="text-align:center">My Text</p>
  </body>
</html>

＆＃13;

Answer 2

p { text-align: center; }

只需将此行添加到您的CSS中即可。如果您不使用单独的css文件，可以像这样编辑它：

<html>
    <head>
    </head>

    <body>
        <p style="text-align:center">My Text</p>
    </body>
</html>

Answer 3

考虑到你在body标签的整个宽度上都有一个p标签，你会因为text-align：center而得到很多结果。您可以参考想要保持文本内容居中的布局。为此，您需要边距和最大宽度。希望以下内容清楚明白。

＆＃13;

.centered-column {
  position: relative;
  background: #ccc;
  max-width: 300px;
  margin: 0 auto;
}

＆＃13;

<div class='centered-column'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id nulla libero. Nullam feugiat justo ligula, convallis luctus libero semper ut. Vivamus at ante sed ligula ullamcorper convallis. Praesent elementum, dolor vitae dapibus interdum, urna ipsum
    ornare est, id placerat augue dolor sed velit. Proin tellus justo, volutpat ac magna et, ultrices malesuada urna. Praesent et quam sed odio consectetur ullamcorper id vitae leo. Vivamus maximus erat ornare imperdiet euismod. Etiam sapien augue, dictum
    sed condimentum vel, faucibus sed orci. Nulla dictum nunc eros, ac consectetur ex posuere id. Suspendisse pulvinar pellentesque sapien in rhoncus. Vestibulum consectetur in dui vitae luctus.</p>
</div>

＆＃13;

Answer 4

只需将其添加到CSS文件

即可

p {
  text-align:center;
}

但我强烈建议您是否要使用自适应网站查看Bootstrap documentation;它会让你的生活更轻松。

响应式HTML - 如何响应地将文本与中间对齐

4 个答案: