Невозможно центрировать абзац в div

Question

Я пробовал использовать flexbox для центрирования пары кнопок и p, но у меня возникли проблемы.

У меня есть этот код

.container {
  background: rgb(255, 126, 50, 0.15);
  padding: 0 2rem;
  border-radius: 0.375rem;
  margin: 3.625rem 1.25rem 2rem 1.25rem;
  background: black;
}

.layout {
  height: calc(100vh - 4.5rem);
  background: balck;
}

.loginSection {
  width: 50vh;
  margin: 0 auto;
  border: 1px solid #ffffff;
}

.loginSection p {
    display: flex;
    align-items: center;
    margin: 16px 0;
    text-align: center;
    width: 12rem;
    border: 1px solid #ffffff;
}

.btn-login {
  height: 1.25rem;
  display: flex;
  color: rgba(255, 255, 255, 0.54);
  text-decoration: none;
  align-items: center;
  width: 12rem;
  margin: 0 auto;
  border: 1px solid #ffffff;
  padding: 1rem 1.25rem;

  line-height: 1rem;
  border-radius: 0.375rem;
  font-size: 1rem;
}

.btn-login img {
    margin-right: 1rem;
}

.btn-continue {
  height: 1.25rem;
  display: flex;
  color: rgba(255, 255, 255, 0.54);
  text-decoration: none;
  align-items: center;
  width: 12rem;
  margin: 0 auto;
  border: 1px solid #ffffff;
  padding: 1rem 1.25rem;

  line-height: 1rem;
  border-radius: 0.375rem;
  font-size: 1rem;
}

<div class="layout">
  <div class="container">
    <div class="loginSection">
      <button class="btn-login" href="/login">
        Log-In
      </button>

      <p>Enter your email</p>

      <button class="btn-continue" href="/home">Continue</button>
    </div>
  </div>
</div>

Но я могу центрировать p

|    |      Log-In      |    |
|Enter your email   |
|    | Continue         |    |

Answer 1

Flexbox обычно используется путем установки свойств гибкости в родительском контейнере , чтобы влиять на компоновку дочерних внутри этого контейнера.

Похоже, вы добавляете display: flex и align-items: center в элемент .loginSection p, когда свойства гибкости должны быть установлены для родительского .loginSection.

Если вы намерены центрировать все элементы внутри .loginSection по горизонтали, то вы можете избавиться от свойств гибкости дочерних элементов и добавить следующие правила:

.loginSection {
  display: flex;
  flex-direction: column;
  justify-content: center;

  // ... other styles here
}

Answer 2

Вы захотите добавить display:flex с flex-direction: column и align-items:center к контейнеру .loginSection.

Обычно при использовании гибкости вы сгибаете контейнер, а затем дочерние элементы становятся «flex- items "вместо того, чтобы сгибать сами элементы.

.loginSection {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items:center;
}

.loginSection p { text-align:center; }

<div class="layout">
  <div class="container">
    <div class="loginSection">
      <button class="btn-login" href="/login">
        Log-In
      </button>

      <p>Enter your email</p>

      <button class="btn-continue" href="/home">Continue</button>
    </div>
  </div>
</div>

Или, если вы хотите, чтобы все они были растянуты, используйте align-items:stretch

.loginSection {
  margin: 0 auto;
  padding: 1rem; /* optional if you don't want it to stretch the whole width */
  display: flex;
  flex-direction: column;
  align-items:stretch;
}

.loginSection p { text-align:center; }

<div class="layout">
  <div class="container">
    <div class="loginSection">
      <button class="btn-login" href="/login">
        Log-In
      </button>

      <p>Enter your email</p>

      <button class="btn-continue" href="/home">Continue</button>
    </div>
  </div>
</div>

Answer 3

.container {
  background: rgb(255, 126, 50, 0.15);
  padding: 0 2rem;
  border-radius: 0.375rem;
  margin: 3.625rem 1.25rem 2rem 1.25rem;
  background: black;
}

.layout {
  height: calc(100vh - 4.5rem);
  background: balck;
}

.loginSection {
  width: 50vh;
  margin: 0 auto;
  border: 1px solid #ffffff;
}

.layout p {
    text-align: center;
width: 12rem;
border: 1px solid #ffffff;
color: white;
margin: auto;
}

.btn-login {
  height: 1.25rem;
  display: flex;
  color: rgba(255, 255, 255, 0.54);
  text-decoration: none;
  align-items: center;
  width: 12rem;
  margin: 0 auto;
  border: 1px solid #ffffff;
  padding: 1rem 1.25rem;

  line-height: 1rem;
  border-radius: 0.375rem;
  font-size: 1rem;
}

.btn-login img {
    margin-right: 1rem;
}

.btn-continue {
  height: 1.25rem;
  display: flex;
  color: rgba(255, 255, 255, 0.54);
  text-decoration: none;
  align-items: center;
  width: 12rem;
  margin: 0 auto;
  border: 1px solid #ffffff;
  padding: 1rem 1.25rem;

  line-height: 1rem;
  border-radius: 0.375rem;
  font-size: 1rem;
}

<div class="layout">
  <div class="container">
    <div class="loginSection">
      <button class="btn-login" href="/login">
        Log-In
      </button>

      <p>Enter your email</p>

      <button class="btn-continue" href="/home">Continue</button>
    </div>
  </div>
</div>