Html Question posted in
Some basic documentation can be found here.

Html – Centering entire main element

I have put some content and form inside the main element. Here is the HTML:

<main>
  <h1>My main content</h1>
  <form action="/action_page.php" id="form">
    <input type="email" id="email" name="email" placeholder="Enter your email address"><br><br>
    <input type="submit" value="Submit">
  </form> 
</main>

with the following CSS:

main {
    width: 800px;
    margin: 0 auto;
}
<main>
    <h1>My main content</h1>
    <form action="/action_page.php" id="form">
      <input type="email" id="email" name="email" placeholder="Enter your email address"><br><br>
      <input type="submit" value="Submit">
    </form>
</main>

However, the main element is not centered exactly. What could be the reason?

Tags:

3

Answers


  1. 0

    Since the entire content takes 100% of the main width, centering things will look exactly like non-centering them. Therefore, you can achieve your goal by specifying a width for the contents of your main in percent (I used 50%) and then specify a margin-left for main that will be half of the unused real-estate in width. (So, if you have chosen your content to be of 50%, then it’s a margin-left of (100 – 50) / 2 % = 25%. If, instead you have chosen a width of 80%, then it would be a margin-left of (100 – 80) / 2 % = 10%).

    main {
    width: 800px;
    margin-left: 25%;
}

main > * {
    width: 50%;
}
    <main>
    <h1>My main content</h1>
    <form action="/action_page.php" id="form">
      <input type="email" id="email" name="email" placeholder="Enter your email address"><br><br>
      <input type="submit" value="Submit">
    </form>
</main>

    Of course, this can still be improved, but applying further size and other styles to your elements, but this is a good start, I suppose.

    Login or Signup to reply.
  2. 0

    If you add outline: 1px solid #000 to main, you will understand why it’s not centered.

    main {
    width: 800px;
    margin: 0 auto;

    outline: 1px solid;
}
    <main>
    <h1>My main content</h1>
    <form action="/action_page.php" id="form">
      <input type="email" id="email" name="email" placeholder="Enter your email address"><br><br>
      <input type="submit" value="Submit">
    </form>
</main>

    The main element takes up 800px no matter how wide the children are so you will always have a lot of white-space to the right of the form.

    Change width to max-width and add display: inline-block to have main wrap around the widest child, but you will get another problem instead.

    main {
    display: inline-block;
    max-width: 800px;
    margin: 0 auto;

    outline: 1px solid;
}
    <main>
    <h1>My main content</h1>
    <form action="/action_page.php" id="form">
      <input type="email" id="email" name="email" placeholder="Enter your email address"><br><br>
      <input type="submit" value="Submit">
    </form>
</main>

    The element wont center anymore, because you can only center using margin: auto on block elements. So add a div.container around the main elements width a max-width and center that instead.

    main {
    display: flex;
    justify-content: center;
 }

.center-container {
   display: inline;
   max-width: 800px;
   outline: 1px solid; /* ONLY FOR SHOWING THE SIZE OF THE CONTAINER */
}
    <main>
    <div class="center-container">
      <h1>My main content</h1>
      <form action="/action_page.php" id="form">
        <input type="email" id="email" name="email" placeholder="Enter your email address"><br><br>
        <input type="submit" value="Submit">
      </form>
   </div>
</main>
    Login or Signup to reply.
  3. 0

    Just decrease the width to the width of the form (main‘s content). You can check it in the inspector. And change the width to max-width, to make it responsive.

    main {
  max-width: 235px; /* it was just width*/
  margin: 0 auto;
}
    <main>
  <h1>My main content</h1>
  <form action="/action_page.php" id="form">
    <input type="email" id="email" name="email" placeholder="Enter your email address"><br><br>
    <input type="submit" value="Submit">
  </form>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search