Question

我有一个表单，其输入字段都是端对端水平对齐的。我希望它在网页的中心对齐。我尝试使用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>

Answer 1

使用以下css表格：

position:absolute;
left: 50%;
top : 50%;
transform: translate(-50%, -50%);

Answer 2

    <!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>
          <div id="center" style="padding-left: 500px;">
          <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>
        </div>

        <!-- 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 个答案: