gpt4 book ai didi

html - Bootstrap 中的居中形式?

转载 作者:行者123 更新时间:2023-11-28 04:44:26 24 4
gpt4 key购买 nike

我在 Bootstrap 中将表单居中时遇到问题。该表单包括名称和评论框,其中包括一个发布按钮。

这是我的:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
<form id ="Form" onsubmit ="return false">
<div class="mx-auto"style="width: 200px;">
<label for="usr">Name:</label>
<input type="text" id="name" >
<br>
<br>
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
<br>
<button onClick ="myFunction()">Post</button>
</form>
<br>
<ul id="adduserinput"></ul>
</div>
</div>
</div>

</body>
</html>

当您运行代码时,表单只会出现在页面的左侧。它不会使页面居中。谁能帮我解决这个问题?

最佳答案

这将帮助您将表单置于页面中心。

.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh; // optional this is only to get full height
}

关于html - Bootstrap 中的居中形式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53054489/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com