如何在其容器的底部中心对齐按钮？

Question

Here is my code,i want to align the submit button in the bottom center, i have tried to change its position , display of its container and the bottom itself,is there any solution? PS:it would be better if i leave it there and when resizing the screen the button will hop to the next line to the wanted position(bottom center) please.THANK YOU

 #datails_container { position: relative; display: flex; background-color: darkgrey; width: 70%; border-radius: 5px; top: 50px; margin: auto; border-radius: 6px; }.theight { padding-bottom: 10px; border: 1px black solid; margin: auto; width: 80%; background-color: white; border-radius: 4px; } form { width: 100%; height: 100%; align-items: center; display: flex; flex-flow: row wrap; justify-content: space-between; } span { background-color: #b50612; width: 92px; height: min-content; border-radius: 5px; position: relative; top: -7px; left: 12px; color: white; font-weight: bold; text-align: center; } #presentaion { color: wheat; width: 100%; position: absolute; text-align: center; } #detsubmitter { position: absolute; border: 1px solid black; display: block; right: 5px; bottom: 6px; background-color: green; border-radius: 4px; height: 2.6em; } #detsubmitter:hover { cursor: pointer; }.itemcount { font-size: 16px; font-family: sans-serif; font-weight: 700; color: #444; line-height: 1.3; padding: .6em 1.4em.6em 1.4em; box-sizing: border-box; margin: 0; border: 1px solid #aaa; box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04); border-radius: .5em; appearance: none; background-color: #fff; height: 40px; display: flex; } label { top: 28px; left: -65px; height: min-content; width: 79.9667px;important: display; inline-flex: font-weight; bold: color; black: display; flex: } input { height; 25px: border-radius; 5px: position; relative; }

 <div id="datails_container" > <form id="" action="" method="post"> <div id="genre_cont" class="theight" style="margin-top: 75px;"> <span>Genres</span> <select name="gnerenmbr" class="itemcount" id="gnerenmbr"> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">9</option> </select> <label for="gnerenmbr">genre(s):</label> <input type="text" placeholder="input 1"> <input type="text" placeholder="input 2"> <input type="text" placeholder="input 3"> <input type="text" placeholder="input 4"> </div> <br> <div id="language_cont" class="theight"> <span>Languages</span> <select name="languagenmbr" class="itemcount" id="languagenmbr"> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">9</option> </select> <label for="languagenmbr">Language(s):</label> <input type="text" placeholder="input 1"> <input type="text" placeholder="input 2"> <input type="text" placeholder="input 3"> </div> <br> <div id="country_cont" class="theight"> <span>Countries</span> <select name="countrynmbr" class="itemcount" id="countrynmbr"> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">9</option> </select> <label for="countrynmbr">country(ies):</label> <input type="text" placeholder="input 1"> <input type="text" placeholder="input 2"> </div> <button id="detsubmitter" type="submit">ADD details</button> </form> </div>

Answer 1

Is this what you want?

 #datails_container { position: relative; display: flex; background-color: darkgrey; width: 70%; border-radius: 5px; top: 50px; margin: auto; border-radius: 6px; }.theight { padding-bottom: 10px; border: 1px black solid; margin: auto; width: 80%; background-color: white; border-radius: 4px; } form { width: 100%; height: 100%; align-items: center; display: flex; flex-flow: row wrap; justify-content: space-between; } span { background-color: #b50612; width: 92px; height: min-content; border-radius: 5px; position: relative; top: -7px; left: 12px; color: white; font-weight: bold; text-align: center; } #presentaion { color: wheat; width: 100%; position: absolute; text-align: center; } #detsubmitter { position: relative; border: 1px solid black; display:block; bottom: 0px; margin:0 auto; background-color: green; border-radius: 4px; height: 2.6em; } #detsubmitter:hover { cursor: pointer; }.itemcount { font-size: 16px; font-family: sans-serif; font-weight: 700; color: #444; line-height: 1.3; padding: .6em 1.4em.6em 1.4em; box-sizing: border-box; margin: 0; border: 1px solid #aaa; box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04); border-radius: .5em; appearance: none; background-color: #fff; height: 40px; display: flex; } label { top: 28px; left: -65px; height: min-content; width: 79.9667px;important: display; inline-flex: font-weight; bold: color; black: display; flex: } input { height; 25px: border-radius; 5px: position; relative; }

 <div id="datails_container" > <form id="" action="" method="post"> <div id="genre_cont" class="theight" style="margin-top: 75px;"> <span>Genres</span> <select name="gnerenmbr" class="itemcount" id="gnerenmbr"> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">9</option> </select> <label for="gnerenmbr">genre(s):</label> <input type="text" placeholder="input 1"> <input type="text" placeholder="input 2"> <input type="text" placeholder="input 3"> <input type="text" placeholder="input 4"> </div> <br> <div id="language_cont" class="theight"> <span>Languages</span> <select name="languagenmbr" class="itemcount" id="languagenmbr"> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">9</option> </select> <label for="languagenmbr">Language(s):</label> <input type="text" placeholder="input 1"> <input type="text" placeholder="input 2"> <input type="text" placeholder="input 3"> </div> <br> <div id="country_cont" class="theight"> <span>Countries</span> <select name="countrynmbr" class="itemcount" id="countrynmbr"> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">9</option> </select> <label for="countrynmbr">country(ies):</label> <input type="text" placeholder="input 1"> <input type="text" placeholder="input 2"> </div> <button id="detsubmitter" type="submit">ADD details</button> </form> </div>