Question

#content{
  display:flex;
  justify-content:center;
  height:500px;
  width:100%;
}

#title {
  display:block;
}

      #name {
        display:block;
      }
      #email {
        display:block;
      }
      
      #number {
        display:block;
      }

 <body>
    <div id="content">
      <div id="title"><p>This is a survey form.</p></div>
    <div id="description"><p>It would be nice if you  could fill this information about addiction.</p></div>
    <form id="survey-form">
      <label id="name-label" for="name">Name:</label><input id="name" type="text" name="name" placeholder="Enter your name" required>
      <label id="email-label" for="email">Email:</label>
      <input id="email" type="email" name="email" placeholder="Enter your email">
      <label id="number-label" for="age">Enter your age:</label>
      <input id="number" type="number" name="age" min="18" max="55" placeholder="Enter your age">
      <h4>What are you currently addicted to?</h4>
      <select id="dropdown" name="items">
        <option value="alcohol">Alcohol</option>
        <option value="smoking">Smoking</option>
        <option value="gaming">Gaming</option>
        <option value="other">Other</option>
      </select>
      <p>For how long you've been addited?</p>
      
      <label><input type="radio" name="1month" id="1month"> >1 Month</label>
      <label><input type="radio" name="6months" > >6 Months</label>
      <label><input type="radio" name="12months" > >12 Months</label><br>
      How many people do you know that are addicted as well?
      <input type="checkbox" value="none">None
      <input type="checkbox" value="few">Few (1-5)
      <input type="checkbox" value="tons">A lot (over 5)
      <p>If there's anything else you would like to point out feel free to do it.</p>
      <textarea name="feedback" cols="30" rows="10"></textarea>
      <input id="submit" type="submit" name="submit" value="Submit your information">
      </div>
    </form>
  </body>

是什么使第一和第二段显示在页面的左侧？
我已经在div容器中覆盖了所有内容，但是现在您可以看到由于某种原因它漂浮在左侧。
我希望它能像其余所有内容一样居中。
在这里使用flexbox是一个不好的选择吗？

Answer 1

#content{
  display:grid;
  justify-content:center;
  height:500px;
  width:100%;
}

#title {
  display:block;
}

      #name {
        display:block;
      }
      #email {
        display:block;
      }
      
      #number {
        display:block;
      }
      input#submit{
      display:block;
      }

<body>
    <div id="content">
      <div id="title"><p>This is a survey form.</p></div>
    <div id="description"><p>It would be nice if you  could fill this information about addiction.</p></div>
    <form id="survey-form">
      <label id="name-label" for="name">Name:</label><input id="name" type="text" name="name" placeholder="Enter your name" required>
      <label id="email-label" for="email">Email:</label>
      <input id="email" type="email" name="email" placeholder="Enter your email">
      <label id="number-label" for="age">Enter your age:</label>
      <input id="number" type="number" name="age" min="18" max="55" placeholder="Enter your age">
      <h4>What are you currently addicted to?</h4>
      <select id="dropdown" name="items">
        <option value="alcohol">Alcohol</option>
        <option value="smoking">Smoking</option>
        <option value="gaming">Gaming</option>
        <option value="other">Other</option>
      </select>
      <p>For how long you've been addited?</p>
      
      <label><input type="radio" name="1month" id="1month"> >1 Month</label>
      <label><input type="radio" name="6months" > >6 Months</label>
      <label><input type="radio" name="12months" > >12 Months</label><br>
      How many people do you know that are addicted as well?
      <input type="checkbox" value="none">None
      <input type="checkbox" value="few">Few (1-5)
      <input type="checkbox" value="tons">A lot (over 5)
      <p>If there's anything else you would like to point out feel free to do it.</p>
      <textarea name="feedback" cols="30" rows="10"></textarea>
      <input id="submit" type="submit" name="submit" value="Submit your information">
      </div>
    </form>
  </body>

Answer 2

我想这可以帮助您实现所需的目标。您可以使用以下代码段替换CSS代码。

#content{
    text-align:center;
    height:500px;
    width:100%;
}
#title {
    display:block;
}
#name {
    display:block;
    margin:0 auto;
}
#email {
    display:block;
    margin:0 auto;
}
#number {
    display:block;
    margin:0 auto;
}

是什么使第一段和第二段向左浮动？

2 个答案: