html - 从 Flexbox 中排除内部元素？

Question

interview-box-container 是使用 flexbox 时应该在的位置，但我无法对齐 div 的任何内部元素。 text-align 不影响 flexbox 的文本 b/c；尝试不使用 flexbox 并使用 vertical-align: center 没有运气。

希望找到一个可以使用 flexbox 并能够对齐框内的内部内容/元素的解决方案。

body {
  height: 100%;
  width: 100%;
}

.interview-banner {
  width: 100%;
  height: 95px;
  background-color: #19283B;
  position: fixed;
  z-index: 1;
}

.interview-background {
  background-color: #F4F8FB;
  min-height: 100vh;
  height: 100%;
}

.interview-box-container {
  /*align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: row;*/
  vertically-align: center;
}

.interview-box {
  position: relative;
  border: 2px solid black;
  max-width: 625px;
  width: 100%;
  min-height: 446px;
  /*display: flex;
  flex-direction: column;
  align-items: center; */
  padding: 35px;
  background: white;
  margin-top: 100px;
  margin-bottom: 80px;
}
/*should be sitting on the right*/
.interview-box>button {
  position: absolute;
  bottom: 35px;
  width: 108px;
  height: 41px;
  font-family: OpenSans-Light;
  font-size: 15px;
  text-align: center;
  color: #FFFFFF;
  background-color: #19283B;
  border: 1px solid #19283B;
  border-radius: 4px;
}
/*should be on the left*/
.interview-box > p {
  text-align: right;
  color: red;
}

<div class="interview-banner"></div>
<section class="interview-background">
  <h2 class="interview-header">Header Text</h2>
  <div class="interview-box-container">
    <div class="interview-box">
      <p>Explanation text</p>
      <button>Button Text</button>
    </div>
  </div>
</section>

Answer 1

可以设置justify-content: center;在.interview-box-container和其他一些调整，例如删除 position:absolute来自 button (见片段中的评论)

注意:没有值center属性(property)vertical-align ，您找到的最接近的是 middle值

body {
  height: 100%;
  width: 100%;
  margin: 0
}

.interview-banner {
  width: 100%;
  height: 95px;
  background-color: #19283B;
  position: fixed;
  z-index: 1;
}

.interview-background {
  background-color: #F4F8FB;
  min-height: 100vh;
  height: 100%;
}

.interview-box-container {
  display: flex;
  justify-content: center; /*align box in center */
}

.interview-box {
  /*position: relative; */
  border: 2px solid black;
  max-width: 625px;
  min-height: 446px;
  display: flex;
  flex-direction: row-reverse; /* to make button on left and text on right*/
  align-items: center; /* align the text and button vertically*/
  justify-content: space-between; /* items are evenly distributed in the line; first item is on the start line, last item on the end line*/
  padding: 35px;
  background: white;
  margin: 100px 0 80px
}

.interview-box>button {
 /* position: absolute;
  bottom: 35px;*/
  width: 108px;
  height: 41px;
  font-family: OpenSans-Light;
  font-size: 15px;
  text-align: center;
  color: #FFFFFF;
  background-color: #19283B;
  border: 1px solid #19283B;
  border-radius: 4px;
}

.interview-box>p {
  color: red;
}

<div class="interview-banner"></div>
<section class="interview-background">
  <h2 class="interview-header">Header Text</h2>
  <div class="interview-box-container">
    <div class="interview-box">
      <p>Explanation text</p>
      <button>Button Text</button>
    </div>
  </div>
</section>

---

虽然我不知道你用这个标记有什么意义，但它可以简化成这样:

body {
  height: 100%;
  width: 100%;
  margin: 0
}

.interview-banner {
  width: 100%;
  height: 95px;
  background-color: #19283B;
  position: fixed;
  z-index: 1;
}

.interview-background {
  background-color: #F4F8FB;
  min-height: 100vh;
  height: 100%;
}

.interview-box-container {
  border: 2px solid black;
  max-width: 625px;
  min-height: 446px;
  display: flex;
  flex-direction: row-reverse; /* to make button on left and text on right*/
  align-items: center; /* align the text and button vertically*/
  justify-content: space-between; /* items are evenly distributed in the line; first item is on the start line, last item on the end line*/
  padding: 35px;
  background: white;
  margin: 100px auto 80px
}

.interview-box-container>button {
 /* position: absolute;
  bottom: 35px;*/
  width: 108px;
  height: 41px;
  font-family: OpenSans-Light;
  font-size: 15px;
  text-align: center;
  color: #FFFFFF;
  background-color: #19283B;
  border: 1px solid #19283B;
  border-radius: 4px;
}

.interview-box-container>p {
  color: red;
}

<div class="interview-banner"></div>
<section class="interview-background">
  <h2 class="interview-header">Header Text</h2>
  <div class="interview-box-container">
      <p>Explanation text</p>
      <button>Button Text</button>
  </div>
</section>