居中的形式，在按钮之后

Question

我打算将一个长输入表单居中。 之后，我需要在表单右端后 15px 处放置一个提交按钮。 你能帮我写代码吗？ 谢谢你。

我的尝试：

 <div style="background-color: red; width: 100%; "> <form action="file.php"> <center><input type="text"  name="c2" style="width: 79%; font-size:25pt;"></center> <input type="submit" value="send" style="position: relative; left: 15px"> </form> </div>

Answer 1

Flexbox 将是几种可能性之一。

 .wrapper { display:flex; align-items: center; justify-content: center; }.inp { width: 79%; font-size:25pt; }

 <div style="background-color: red; width: 100%; "> <form action="file.php"> <div class="wrapper"> <input type="text" name="c2" class="inp"> <br/> <input type="submit" value="send" style="position: relative; left: 15px"> </div> </form> </div>

Answer 2

你可以这样做，使用 flexbox。 https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

 .form-container { background-color: red; width: 100%; display:flex; flex-flow: row nowrap; justify-content:center; padding: 10px; }

 <form action="file.php"> <div class="form-container"> <input type="text"  name="c2" style="width: 79%; font-size:25pt;"> <input type="submit" value="send" style="position: relative; left: 15px"> </div> </form>