Margin: auto; not centering my div

HTML & CSS
1

Hi, i am just started learning how to make a simple website and for sake of learning creating a fake business website. I am trying to get my divs to all be centered by using margin: auto, but haven’t been able to get it to work and the divs stick to the left side.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Lil Mafe</title>
    <style>
      body{
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
     }

      header{
        background: lightcoral;
        color: white;
        border-radius: 5px;
        padding:25px;
      }

      section{
        background: rgb(255, 236, 207);
        padding: 25px;
        display: flex;
        flex-direction: row;
      }

      ul{
        margin: 0px;
        padding: 0px;
        list-style-type: none;;
      }

      li{
        display: inline-block;
        margin-right: 20px;
      }

      div{
        background: rgb(255, 218, 118);
        margin: auto;
        display: inline-block;
        width: 150px;
        text-align: center;
      }

      footer{
        background:rgb(137, 225, 255);
        padding: 5px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li>Home</li>
          <li>Locations</li>
          <li>Contact</li>
        </ul>
      </nav>
      <h1>Mafe's Cafe</h1>
    </header>
    <div>Foods</div>
    <div>Drinks</div>
    <div>Desserts</div>
    <section>More Info</section>
    <footer>© 2018 Mafe Inc.</footer>
  </body>
</html>
2

Hi there mattdus,

and a warm welcome to these forums.:winky:

CSS margin-auto only works on block elements.
You have set the divs to inline-block
Remove it and you’re set to go. :biggrin:

coothead

3

If you want those divs aligned horizontally and centred while using display:inline-block then you would need the text-align:center to be on a parent of those three items instead. The margin:auto does nothing for inline-block elements as @coothead mentions above (inline-blocks are essentially treated the same as text would be in a similar position).

Or use flexbox to center the items as you are already using some flex styles in other elements.

Also even when creating demos you should avoid styling things like divs globally and use a class instead of the element selector. For example if you took my advice in the first paragraph and wrapped a div around your three inline-block divs then everything would be broken because you already styled all divs to be inline-block. :slight_smile:

6 Likes
4

Thanks for the warm welcome! Also wow I wish I knew that, thanks you for the clarification!

5

Oh thank you! That makes more sense also what do you mean formatting with flex box?

6

You can centre things with flexbox. There are some examples here that you will find useful.

3 Likes
7

Thank you so much!

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.