Exclude inner elements from Flexbox? - html

Question

The interview-box-container is where it should be when using flexbox, but I can't align any of the internal elements of the div.
Text-align doesn't influence the text b/c of flexbox; tried to do w/o flexbox and used vertical-align: center w/o luck.
Hoping to find a solution where I can use flexbox and be able to align internal content/elements inside the box.
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

You can set justify-content: center; in .interview-box-container and few other tweaks such as removing position:absolute from button (see comments in snippet)
Note: there isn't value center for property vertical-align, the closest you find is the middle value
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>
Although I don't know what is your point with this markup, it can be simplified like this:
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>

Answer 2

You can try margin to align the box and flex inside it by using space-between :
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;
}
<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>