Centering my webpage tabs

Question

I'm designing a tv show page for my web design class I'm taking. I added tabs to my web page to be used as top menu following a tutorial, but now I'm not sure how to center the tabs even using the center tag.

    body {
      font: 0.8em arial, helvetica, sans-serif;
    }
    #header ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    #header li {
      float: right;
      border: 1px solid #bbb;
      border-bottom-width: 0;
      margin: 0;
      padding: 0;
    }
    #header a {
      text-decoration: none;
      display: block;
      background: #eee;
      padding: 0.24em 1em;
      color: #00c;
      width: 8em;
      text-align: center;
    }
    #header a:hover {
      background: #ddf;
    }
    #header #selected {
      border-color: black;
    }
    #header #selected a {
      position: relative;
      top: 1px;
      background: white;
      color: black;
      font-weight: bold;
    }
    #content {
      border: 1px solid black;
      clear: both;
      padding: 0 1em;
    }
    h1 {
      margin: 0;
      padding: 0 0 1em 0;
    }

<div id="header">
  <center>
    <ul>
      <li style="font-family: DFKai-SB;"><a href="#">Home</a>
      </li>
      <li style="font-family: DFKai-SB;"><a href="#">Shows</a>
      </li>
      <li style="font-family: DFKai-SB;"><a href="#">Classic</a>
      </li>
      <li style="font-family: DFKai-SB;"><a href="#">More</a>
      </li>
    </ul>
  </center>
</div>
<div id="content">
</div>

The `` tag has been deprecated and should no longer be used. — Paulie_D, Mar 06 '15 at 17:25
Take out the center tags in your HTML and try putting the ul in a wrapper, then define it appropriately using css. — shaun, Mar 06 '15 at 17:26
possible duplicate of [How do I center list items inside a UL element?](http://stackoverflow.com/questions/8641251/how-do-i-center-list-items-inside-a-ul-element) — Paulie_D, Mar 06 '15 at 17:26
read documentation http://www.w3schools.com/css/css_align.asp — Kinga, Mar 06 '15 at 17:29

score 0 · Answer 1 · answered Mar 06 '15 at 17:27

0

add this div with class .centeer to your tabs instead of <center> :

.centeer {
    display: table;
    margin: 0px auto 0px auto;
}

Live Demo

answered Mar 06 '15 at 17:27

ZEE

5,669
4
35
53

score 0 · Answer 2 · answered Mar 06 '15 at 17:48

The float has more priority so that's why your content floats to one side instead of align. In your css at li elements use some inline variant to avoid stacking.

        body {

          font: 0.8em arial, helvetica, sans-serif;

        }

       

        #header ul {

          list-style: none;

          padding: 0;

          margin: 0;

        }

        #header li {
          display: inline-flex;

          border: 1px solid #bbb;

          border-bottom-width: 0;

          margin: 0;

          padding: 0;

        }

        #header a {

          text-decoration: none;
          
          background: #eee;

          padding: 0.24em 1em;

          color: #00c;

          width: 8em;

          text-align: center;

        }

        #header a:hover {

          background: #ddf;

        }

        #header #selected {

          border-color: black;

        }

        #header #selected a {

          position: relative;

          top: 1px;

          background: white;

          color: black;

          font-weight: bold;

        }

        #content {

          border: 1px solid black;

          clear: both;

          padding: 0 1em;

        }

        h1 {

          margin: 0;

          padding: 0 0 1em 0;

        }

<div id="header">
  <center>
  <ul>
    <li style="font-family: DFKai-SB;"><a href="#">Home</a>
    </li>
    <li style="font-family: DFKai-SB;"><a href="#">Shows</a>
    </li>
    <li style="font-family: DFKai-SB;"><a href="#">Classic</a>
    </li>
    <li style="font-family: DFKai-SB;"><a href="#">More</a>
    </li>
  </ul>
    </center>
</div>
<div id="content">
</div>

Centering my webpage tabs

2 Answers2