从Flexbox中排除内部元素？

Question

面试盒容器是使用flexbox时应该使用的容器，但是我无法对齐div的任何内部元素。 文本对齐不会影响flexbox的文本b / c;试图用w / o flexbox并使用vertical-align: center没有运气。

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以在justify-content: center;中设置.interview-box-container以及其他一些调整，例如从position:absolute删除button（请参阅代码段中的评论）

注意：对于属性center，值vertical-align没有，您找到的最接近middle值

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

虽然我不知道你对这个标记有什么看法，但它可以像这样简化：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试使用边距来对齐框并在其中使用以下间距展开：

＆＃13;

＆＃13;

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 {
  position: relative;
  border: 2px solid black;
  max-width: 625px;
  width: 100%;
  min-height: 446px;
  margin:100px auto 80px;
  display: flex;
  align-items: center; 
  padding: 35px;
  background: white;
  margin-top: 100px;
  margin-bottom: 80px;
  justify-content:space-between;
}

.interview-box>button {
  width: 108px;
  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 {
  text-align: right;
  color: red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;