如何将复选框与字段集中的标签对齐？答案

【问题标题】：How to align the checkbox with the label within the fieldset?如何将复选框与字段集中的标签对齐？
【发布时间】：2020-02-06 08:20:03
【问题描述】：

这里的新手编码员正在从事一个让我发疯的项目。我已经尝试了我能想到的一切。我知道这与宽度有关，但我无法弄清楚所有内容是否对齐。我希望将标签与字段集中的复选框输入对齐并将其居中。我尝试删除 100% 宽度，使用 flex 显示，将显示更改为内联块，以及其他各种但没有成功 - 任何帮助将不胜感激！

    <div class="container">
      <h1 class="l-heading"><span class="text-primary">Contact</span> | Villa Aviana</h1>
      <p>Please fill out the form below to contact us</p>
      <form action="process.php">
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" name="name" id="name">
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" name="email" id="email">
        </div>

        <div class="form-group">
          <label for="state-select">Choose Your State:</label>
          <select name="state" id="state-select">
            <option value="">Required</option>
            <option value="ct">Connecticut</option>
            <option value="ny">New York</option>
            <option value="ma">Massachusets</option>
            <option value="nh">New Hampshire</option>
            <option value="me">Maine</option>
          </select>
        </div>
</form>

<fieldset>
  <legend>Newsletter</legend>
  <div>
    <input id="field" type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
    <label for="subscribeNews">Subscribe Me</label>
  </div>
</fieldset>


      <div class="form-group">
        <label for="message">Message</label>
        <textarea name="message" id="message"></textarea>
        <button type="submit" class="btn">Submit</button>
      </div>
  </section>
  </div>

CSS

#contact-form .form-group {
  margin-bottom: 20px;

  }

  #contact-form  {
    display: block;
    margin-bottom: 5px;
  }

  #contact-form input, 
  #contact-form textarea {
  width: 100%;
    padding: 10px;
    border: 1px #ddd solid;
}

#contact-form textarea {
  height: 200px;
}

#contact-form input:focus,
#contact-form textarea:focus {
  outline: none;
  border-color: #12cad6;
}```

【问题讨论】：

我投票结束这个问题，因为this question has been asked ad nauseum
感谢您的信息。我确实研究了这些答案，但它们并没有帮助我解决问题。我也尝试了 flex 选项，似乎我的 100% 宽度可能是问题，但我不确定如何在不影响整个布局的情况下解决这个问题。我想我可以重新开始。如果有人想看，我可以用新鲜的眼睛。这是我的联系页面链接：villaaviana.000webhostapp.com/contact.html
@DeborahSavage 有人（安德鲁）为您提供了可能的解决方案来解决您的问题。你试过了吗？如果它有效与否，也许你可以在它下面发表评论让他们知道。如果它解决了问题，请考虑“接受”答案。这样，您的帖子将被正式关闭，这是一件“好事”:)

标签： html css

【解决方案1】：

向包含标签和复选框的 div 添加一个类

<div class="subscribe-news__container">
    <input id="field" type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
    <label for="subscribeNews">Subscribe Me</label>
</div>

.subscribe-news__container {
  display: flex; // this will fix it you may need to add some margin-left to the label
  justify-content: center; // this will center horizontally within the div the page when using flex
  align-items: center; // this will center your items vertically when using flex
}

我还建议研究一些 flex 选项，例如 justify-content 和 align-items。上面已经解释过了。

您还使用 ID 进行了很多选择，我建议您使用类来代替。

类是用来重用的，而 ID 不是。这也会导致可访问性问题，因为重复 ID 可能会成为问题。

我希望这会有所帮助:)

我测试过的完整代码。包含样式标签只是为了能够在我端快速测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #contact-form .form-group {
            margin-bottom: 20px;

            }

            #contact-form  {
                display: block;
                margin-bottom: 5px;
            }

            #contact-form input, 
            #contact-form textarea {
            width: 100%;
                padding: 10px;
                border: 1px #ddd solid;
        }

        #contact-form textarea {
            height: 200px;
        }

        #contact-form input:focus,
        #contact-form textarea:focus {
            outline: none;
            border-color: #12cad6;
        }
        .subscribe-news__container {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="l-heading"><span class="text-primary">Contact</span> | Villa Aviana</h1>
        <p>Please fill out the form below to contact us</p>
        <form action="process.php">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" name="name" id="name">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" name="email" id="email">
            </div>

            <div class="form-group">
                <label for="state-select">Choose Your State:</label>
                <select name="state" id="state-select">
                    <option value="">Required</option>
                    <option value="ct">Connecticut</option>
                    <option value="ny">New York</option>
                    <option value="ma">Massachusets</option>
                    <option value="nh">New Hampshire</option>
                    <option value="me">Maine</option>
                </select>
            </div>
</form>

<fieldset>
<legend>Newsletter</legend>
<div class="subscribe-news__container">
    <input id="field" type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
    <label for="subscribeNews">Subscribe Me</label>
</div>
</fieldset>


        <div class="form-group">
            <label for="message">Message</label>
            <textarea name="message" id="message"></textarea>
            <button type="submit" class="btn">Submit</button>
        </div>
</section>
</div>
</body>
</html>

【讨论】：