在網頁中心對齊水平表格
[英]Align a horizontal form at the center of the webpage
問題描述
我有一個表單，它的輸入字段都是水平對齊的。 我希望它與網頁的中心對齊。我嘗試使用margin: 0 auto 。 那沒有幫助。 我也試過position: absolute和left top但這並沒有給我想要的結果。
還提交按鈕對齊在中心。
這是我的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>APT - Aviation | Travel | Hospitality</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<div class="background-wrap">
<video id="video-bg-elem" poster="images/clouds-from-an-airplane-window-picjumbo-com.gif" preload="auto" autoplay="true" loop muted>
<source src="video/clouds.mp4" type="video/mp4">
</video>
</div>
<div id="logo">
<a href="index.php"><img src="images/APT-LOGO-PNG.png" ></a>
</div>
</div>
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email">
</div>
<div class="form-group">
<input type="tel" class="form-control" id="contact" name="contact" placeholder="Enter contact">
</div>
<button style="display:block;" type="submit" class="btn btn-default">Submit</button>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
2 個解決方案
解決方案1
0 已采納 2017-04-09 07:52:45
對表單使用以下 css：
position:absolute;
left: 50%;
top : 50%;
transform: translate(-50%, -50%);
解決方案2
0 2017-04-09 08:01:29
您可以使用以下 css 片段，它遵循 flexbox 樣式的最新特性：
body {
display:flex;
justify-content:center;
align-items:center;
flex-direction: column;
}
input {
width: 200px;
margin-top: 25px;
}
水平居中對齊按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.