How to fix: CSS display:inline-block with text-align:center on parent is slightly off-center

Question

I'm building my first website with HTML5, and have run into a problem that is driving me insane. I'm trying to perfectly center the items within a horizontal navigation bar at the top of my page. The items are within an unordered list.

I have display:inline-block applied to the list items with text-align:center on the parent. It seems to want to work, but it appears just to the right of the center. I tried taking everything out of a list and simply putting it into a div, and it immediately worked and centered perfectly, but I could not figure out how to efficiently format the individual elements without having them in a list. As soon as I put them back into a list, they shifted back over to the right. I have put a white background on the header to make it easier to see the alignment.

#menu {
  width: 960px;
  max-height: 90px;
  background: #ffffff;
}

#menu ul {
  text-align: center;
  list-style: none;
  padding-top: 18px;
  width: 960px;
}

#menu li {
  display: inline-block;
  vertical-align: middle;
}

#menu li a,
menu li a:visited {
  color: #333347;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  padding: 0px 13px 0px 13px;
}

<nav id="menu">

  <ul>
    <li class="menuitem"><a href="index.html">Home</a></li>
    <li class="menuitem"><a href="gallery.html">Gallery</a></li>

    <li class="menuitem"><a href="shop.html">Shop</a></li>
    <li class="menuitem"><a href="contact.html">Contact</a></li>
  </ul>
</nav>

I expected it to center the list, but it appears slightly to the right of the center.

`ul` by default have padding. You need to reset the padding. You can do `padding: 18px 0 0 0` — Yor, Aug 14 '19 at 06:14
Remember: for CSS, if the value is zero, the unit can be omitted. — Raptor, Aug 14 '19 at 06:17

score 0 · Accepted Answer · answered Aug 14 '19 at 06:15

You Try

    <nav id="menu">

        <ul>
            <li class="menuitem"><a href="index.html">Home</a></li>
            <li class="menuitem"><a href="gallery.html">Gallery</a></li>

            <li class="menuitem"><a href="shop.html">Shop</a></li>
            <li class="menuitem"><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

CSS:

#menu{
    width:960px;
    max-height:90px;
    background:#ffffff;
}

#menu ul{
    text-align:center;
    list-style:none;
    padding: 18px 0 0 0;
    width:960px;
}

#menu li{
    display:inline-block;
    vertical-align:middle;
}

#menu li a,menu li a:visited{
    color:#333347;
    text-decoration:none;
    font-size:20px;
    font-weight:bold;
    padding:0px 13px 0px 13px;
}

It will make list at center

ul has by default padding. You need to reset the padding. You can do for ul padding: 18px 0 0 0 — Pratik, Aug 14 '19 at 06:16

score 0 · Answer 2 · answered Aug 14 '19 at 06:16

I have removed the default padding of ul set by the user agent stylesheet. Also I have centered the nav container using auto margin. hope this helps.

html,body{
margin: 0;
padding: 0;
}

#menu{
    width:960px;
    max-height:90px;
    background:#ffffff;
    margin: 0 auto;
}

#menu ul{
    text-align:center;
    list-style:none;
    padding: 18px 0 0;
    width:960px;
    margin: 0 auto;
}

#menu li{
    display:inline-block;
    vertical-align:middle;
}

#menu li a,menu li a:visited{
    color:#333347;
    text-decoration:none;
    font-size:20px;
    font-weight:bold;
    padding:0px 13px 0px 13px;
}

<nav id="menu">

  <ul>
    <li class="menuitem"><a href="index.html">Home</a></li>
    <li class="menuitem"><a href="gallery.html">Gallery</a></li>

    <li class="menuitem"><a href="shop.html">Shop</a></li>
    <li class="menuitem"><a href="contact.html">Contact</a></li>
  </ul>
</nav>

score 0 · Answer 3 · answered Aug 14 '19 at 06:18

0

Try to add these styles:

#menu{
    ....
    margin: 0 auto;
}

#menu ul{
    ....
    padding-left: 0;
}

answered Aug 14 '19 at 06:18

VSMent

376
4
11

score 0 · Answer 4 · answered Aug 14 '19 at 06:19

0

you need to remove default margin and padding from html elements like this:

*{
margin:0;
padding:0
}

answered Aug 14 '19 at 06:19

adel

3,436
1
7
20

score 0 · Answer 5 · answered Aug 14 '19 at 06:33

    Please use this css.
    #menu {
        width: 960px;
        max-height: 90px;
        background: #ffffff;
        margin-left:auto;
margin-right:auto;
    }

    #menu ul {
        text-align: center;
        list-style: none;
        padding-top: 18px;
        width: 960px;
        padding-left: 0;
    }

    #menu li{
        display:inline-block;
        vertical-align:middle;
    }

    #menu li a,menu li a:visited{
        color:#333347;
        text-decoration:none;
        font-size:20px;
        font-weight:bold;
        padding:0px 13px 0px 13px;
    }

Prakash Rajotiya · Answer 6 · 2019-08-14T06:39:27.890

0

This is due to ul have by default 40px left padding. So you need to remove that left padding from ul.

#menu ul{
         ...
         padding-left:0;
       }

      /*or*/

#menu ul{
        ...
        padding: 18px 0 0;
        }

edited Aug 14 '19 at 06:39

answered Aug 14 '19 at 06:34

Prakash Rajotiya

1,013
5
11

score 0 · Answer 7 · answered Aug 14 '19 at 06:46

Put 0 padding on your #menu ul instead of not defining it at all. Like this:

padding: 18px 0px;

I've edited the widths in order to fit it better into the snippet window, and I also added background color to the #menu.

#menu {
  width: 100%;
  max-height: 90px;
  background: #dd0;
}

#menu ul {
  text-align: center;
  list-style: none;
  padding: 18px 0px;
  width: 100%;
}

#menu li {
  display: inline-block;
  vertical-align: middle;
}

#menu li a,
menu li a:visited {
  color: #333347;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  padding: 0px 13px;
}

<nav id="menu">

  <ul>
    <li class="menuitem"><a href="index.html">Home</a></li>
    <li class="menuitem"><a href="gallery.html">Gallery</a></li>

    <li class="menuitem"><a href="shop.html">Shop</a></li>
    <li class="menuitem"><a href="contact.html">Contact</a></li>
  </ul>
</nav>

score 0 · Answer 8 · answered Aug 14 '19 at 06:48

I've change a little your code to make it a little more simplier (Try not to use ID's on CSS, always prefer to use classes instead):

<nav class="menu">
    <ul class="menu-list">
        <li class="menu-item"><a href="index.html">Home</a></li>
        <li class="menu-item"><a href="gallery.html">Gallery</a></li>

        <li class="menu-item"><a href="shop.html">Shop</a></li>
        <li class="menu-item"><a href="contact.html">Contact</a></li>
    </ul>
</nav>

And for the CSS (The trick is to use the 100% of the width where you put the menu, also prefer to use Flexbox that made a lot more simpler to align items in the DOM):

.menu {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-height: 90px;
  background: #ffffff;
  margin: 0 auto;
}

.menu-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  list-style:none;
  padding-top:18px;
  width:100%;
  padding-left: 0;
}

.menu-item a, .menu-item a:visited{
  color: #333347;    
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  padding-left: 1em;
}

Hope this help.

How to fix: CSS display:inline-block with text-align:center on parent is slightly off-center

8 Answers8