0

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>
Sator
  • 636
  • 4
  • 13
  • 34

2 Answers2

0

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>
Greedo
  • 3,438
  • 1
  • 13
  • 28
  • I have forgot to mention that the input is hidden, added it to my question – Sator Nov 12 '20 at 10:04
  • just change the display: none to display: flex when you need to show it, if not, i don't get the question – Greedo Nov 12 '20 at 12:45
0

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;
}
Grégory C
  • 419
  • 2
  • 7
  • 23
  • using `display: flex` on the child elements does not look technically correct – Sator Nov 12 '20 at 10:06
  • .@real_hagrid `.drop-zone_main` and `.drop-zone_second` are not only children but also parents of text node inside them. I checked from my side and it works ;-) – Grégory C Nov 12 '20 at 10:11