align text of flex item to center [duplicate] - html

Question

This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I have a flexbox container with 3 flex items
the text of the two outer items should be at the center point of each item
so far the text appears on the top of
using align-items: center;
recommended in How to vertically align text inside a flexbox?
on the container just squished the divs to one line, ignoring the heigth of the container.
how to center the text at the center of each div ?
body {
margin: 0;
}
.file_upload-container {
display: flex;
margin: 20px;
height: 200px;
/*align-items: center;*/
justify-content: center;
}
.drop-zone_main {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
}
.upload_spacer {
background-color: #00ffb7;
flex-basis: 200px;
}
.drop-zone_second {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
flex-basis: 300px;
}
input {
display: none;
}
<div class="file_upload-container">
<div class="drop-zone_main">Drop MainFile here or click to upload</div>
<input class="input_main" type="file" name="upload_mainfile">
<div class="upload_spacer"></div>
<div class="drop-zone_second">Drop second file here or click to upload</div>
<input class="input_second" type="file" name="upload_secondfile">
</div>

Answer 1

You can wrap your input in a div, so it gets aligned with its siblings, and use display: flex to align the inner content:
body {
margin: 0;
}
.file_upload-container {
display: flex;
margin: 20px;
height: 200px;
/*align-items: center;*/
justify-content: center;
}
.drop-zone_main {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
}
.upload_spacer {
background-color: #00ffb7;
flex-basis: 200px;
}
.drop-zone_second {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
flex-basis: 300px;
}
.input-wrap {
display: flex;
align-items: center;
}
<div class="file_upload-container">
<div class="drop-zone_main">Drop MainFile here or click to upload</div>
<div class="input-wrap">
<input class="input_main" type="file" name="upload_mainfile">
</div>
<div class="upload_spacer"></div>
<div class="drop-zone_second">Drop second file here or click to upload</div>
<div class="input-wrap">
<input class="input_second" type="file" name="upload_secondfile">
</div>
</div>

Answer 2

You need to correct the css rules :
.drop-zone_main {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
justify-content: center;
align-items: center;
display: flex;
}
.drop-zone_second {
color: #cccccc;
border: 4px dashed #009578;
border-radius: 10px;
flex-basis: 300px;
justify-content: center;
align-items: center;
display: flex;
}