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

Css – Margin of wrapper won't center

I’m new to coding. I’m trying to center the content of my body using and .wrapper in CSS. The CSS border, color etc is showing up but I can’t seem to make center my content.

Here’s what I’m trying:

.wrapper {
    max-width: 1280px;
    background-color: beige;
    margin: 0 auto;
    border: 1px solid black;}

I know I could probably use other ways to center the wrapper, but shouldn’t this work in theory? lol

Tags:

2

Answers


  1. 0

    Okay!, You want to center the div.wrapper horizontally and vertically.
    You can use the CSS Flex Property.

     .parent {
      height : 100vh;
      border: 1px solid black;
      display:flex;
      justify-content:center; /* Align horizontally  */
      align-items:center; /* Align vertically */
  }
  .wrapper {
      max-width: 720px;
      background-color: beige;
      border: 1px solid black;
  }
    <!DOCTYPE html>
<html>
  <body>

  <div class="parent">
      <div class="wrapper">
        The content of the body element is displayed in your browser.
      </div>
  </div>

  </body>
</html>
    Login or Signup to reply.
  2. 0

    The element is centered. The problem is that the block elements take all the available width from left to right, so you can’t see if it’s centered or not.

    some common block elements are p and div tags.

    Try reducing the max-width amount as per your need, you will see that it’s centered.

    And another solution is putting all the elements that should be centered in a center tag.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search