justify-content не работает - проблема с flexbox - PullRequest
0 голосов
/ 25 ноября 2018

Я работаю над следующим кодом:

.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 не работает.

ну, мне нужна помощь, спасибо :)

Ответы [ 2 ]

0 голосов
/ 25 ноября 2018

. Кнопка не внутри .позиции.я положил внутрь. позиции.И я добавляю 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>
0 голосов
/ 25 ноября 2018

Если вы имеете в виду центр кнопки под заголовком:

 .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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...