Question

看看这段代码。我是编码的新手，所以我可能会犯一些错误，所以我在这里寻求帮助。我不明白如何在页面中间放置“＃input-group”div：它应该居中，因为它属于已经设置为“text-align：center”的jumbotron，但它不起作用。知道为什么吗？

非常感谢！

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <title>Bootstrap project</title>

    <style type="text/css">

        body {
            position:relative;
        }

        .jumbotron {

            height:500px;
            text-align:center;
            background-image: url(photo-1439209306665-700c9bca794c.jpg)

        }

        #title {
            margin-top:70px;
        }

        hr {
            border-top: 1px solid grey;
            margin-top: 20px;

        }

        #subtitle {
            font-size: 100%;
            font-weight: bold;
            margin-top:50px;
        }

        .input-group {

            width:300px;



        }




    </style>

  </head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">MyApp</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Download</a></li>
        </ul>
        <form class="navbar-form navbar-right" action="/action_page.php">
          <div class="form-group">
            <input type="email" class="form-control" placeholder="Email" name="email">
            <input type="password" class="form-control" placeholder="Password" name="password">
          </div>
          <button type="submit" class="btn btn-primary">Login</button>
        </form>
      </div>
    </nav>

    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1 class="display-4" id="title">My Awesome App!</h1>
        <p class="lead">This is why YOU should download this fantastic app!</p>
          <hr>
        <p id="subtitle">Want to know more? Join our mailing list!</p>

        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">@</span>
            <input type="email" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
        </div>
    </div>
      </div> 
    </body>

</html>

Answer 1

text align仅对齐div中的文本。您需要将左边距和右边距设置为自动。请注意，如果在div上设置了浮点数，则无效。

       .input-group {
        margin-left:auto;
        margin-right:auto;
        width:300px;
        }

Answer 2

直接使用margin: 0 auto上的input

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <title>Bootstrap project</title>

  <style type="text/css">
    body {
      position: relative;
    }
    
    .jumbotron {
      height: 500px;
      text-align: center;
      background-image: url(photo-1439209306665-700c9bca794c.jpg)
    }
    
    #title {
      margin-top: 70px;
    }
    
    hr {
      border-top: 1px solid grey;
      margin-top: 20px;
    }
    
    #subtitle {
      font-size: 100%;
      font-weight: bold;
      margin-top: 50px;
    }
    
    .input-group {
      width: 300px;
      margin: 0 auto;
    }
  </style>

</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">MyApp</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Download</a></li>
      </ul>
      <form class="navbar-form navbar-right" action="/action_page.php">
        <div class="form-group">
          <input type="email" class="form-control" placeholder="Email" name="email">
          <input type="password" class="form-control" placeholder="Password" name="password">
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
      </form>
    </div>
  </nav>

  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4" id="title">My Awesome App!</h1>
      <p class="lead">This is why YOU should download this fantastic app!</p>
      <hr>
      <p id="subtitle">Want to know more? Join our mailing list!</p>

      <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">@</span>
        <input type="email" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
      </div>
    </div>
  </div>
</body>

</html>

为什么<div>即使使用“text-align：center”也不居中？

2 个答案: