Question

我正在尝试垂直/水平居中我的标题，字幕正下方。这是我的尝试：

html, body, h1 {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<div id="container">
  <h1>Main Title</h1>
  <span>Subtitle</span>
</div>

正如您所看到的，副标题与h1位于同一行，我正试图让它低于它。我已尝试将h1设置为display: block;，但在display: flex上使用container时似乎无效。任何帮助将不胜感激。

Answer 1

在flex-direction: column

上设置container

＆＃13;

html, body, h1 {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

＆＃13;

<div id="container">
  <h1>Main Title</h1>
  <span>Subtitle</span>
</div>

＆＃13;

Answer 2

将flex-direction设置为column是一种解决方案。它已在另一个答案中提供。

在某些情况下，如果flex-direction: row是首选（或必需），您可以将flex-wrap: wrap添加到容器中，并为第一个项目提供100％宽度，这会强制第二个项目进入下一个项目线。

＆＃13;

body, h1 {
  margin: 0;
  padding: 0;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-wrap: wrap;           /* NEW */
  align-content: center;     /* NEW */
  text-align: center;        /* NEW */
}

h1 { flex: 0 0 100%; }       /* NEW */

＆＃13;

<div id="container">
  <h1>Main Title</h1>
  <span>Subtitle</span>
</div>

＆＃13;

用flexbox中心打破一条线？

2 个答案: