justify-content 不起作用 - flexbox 问题答案

【问题标题】：justify-content isn't working - flexbox problemjustify-content 不起作用 - flexbox 问题
【发布时间】：2019-04-27 09:25:49
【问题描述】：

我正在编写以下代码：

.positiones {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

<div class="positiones">
  <div class="mainheading">
    <h1>The biggest startup event of the year!</h1><br>
  </div><br>
</div>
<div class="linebreak"></div><br>

<div class="Button">
  <button type="button" class="btn btn-primary btn-lg">Get more info</button><br>
</div>

如您所见， justify-content 属性不起作用。

好吧，我需要一些帮助，谢谢你:)

【问题讨论】：

你说的是按钮吗？
您的代码运行良好。你有一个弹性容器positiones，其中有一项mainheading。你到底想以什么为中心？ h1 或 h1&button?
justify-content 工作正常。 mainheading 有理由居中。您期待什么行为？

标签： html css flexbox

【解决方案1】：

.button 不在 .positiones 内。我放在 .positiones 里面。我加了flex-direction:column

.positiones {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  flex-direction:column;
}

<div class="positiones">
  <div class="mainheading">
    <h1>The biggest startup event of the year!</h1><br>
  </div>
  <div class="Button">
  <button type="button" class="btn btn-primary btn-lg">Get more info</button><br>
</div>
</div>
<div class="linebreak"></div><br>

【讨论】：

【解决方案2】：

如果您的意思是标题下方的按钮居中：

 .positiones {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}
.button {
  display:block;
  margin: 0 auto 0 auto;
  width: 100px;
}

<div class="positiones">
  <div>
    <h1>The biggest startup event of the year!</h1>
    <button class="button" type="button" class="btn btn-primary btn-lg">Get more info</button>
  </div>
</div>

【讨论】：