Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72358

How to align the checkbox with the label within the fieldset?

$
0
0

Newbie coder here working on a project that's making me insane. I have tried everything I can think of. I know it has to do with the width but I can not figure it out so that all the content aligns. I am looking to align the label with the checkbox input within the fieldset and have it centered. I tried removing the 100% width, using flex display, changing the display to inline-block, and other various things but with no success- Any help would be GREATLY appreciated!

<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;
}```


Viewing all articles
Browse latest Browse all 72358

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>