Question

我一直在寻找好几个小时，找不到能够为我的案子工作的答案。

我试图为我写的个人用wordpress插件创建一个简单的（一行标题，一行段落）页面，所有文本都是纵向和横向居中，但标题和段落始终显示在同一行，如下所示：

服务器已关闭游戏服务器当前已关闭。请稍后再查看。

这是该页面的完整代码：

<?php $sitename = get_bloginfo('name'); ?>
<!DOCTYPE html>
<html>
  <head>
    <title><?php echo $sitename; ?> - Game Server Is Down</title>
    <style>
      body {
        margin: 0;
      }

      .centered {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div class="centered">
      <h1>Server Is Down</h1>
      <p>The game server is currently down. Please check back later.</p>
    </div>
  </body>
</html>

我在这里缺少什么？

Answer 1

使用 Flex 会使两个元素位于同一行，因为默认的 flex-direction 为row。

使用

  flex-direction: column;

示例：

＆＃13;

body {
  margin: 0;
}

.centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

＆＃13;

<div class="centered">
  <h1>Server Is Down</h1>
  <p>The game server is currently down. Please check back later.</p>
</div>

＆＃13;

为什么我的标题和段落在同一行？

1 个答案: