CSS center menu

Question

I have looked on here for the solution to this issue and I've tried a number of different ways to tackle it but to no success. I think I'm missing something when attempting to getting the menu to align in the center horizontally.

https://jsfiddle.net/x7yx3sd8/

HTML

<div class="ty-tabs cm-j-tabs clearfix">
    <ul class="ty-tabs__list">
        <li id="description" class="ty-tabs__item cm-js active">
            <a class="ty-tabs__a">Description</a>  
        </li>    
        <li id="features" class="ty-tabs__item cm-js active">
            <a class="ty-tabs__a">Features</a>  
        </li> 
        <li id="discussion" class="ty-tabs__item cm-js active">
            <a class="ty-tabs__a">Review</a>  
        </li> 
    </ul>    
</div>

CSS

.clearfix:before, .clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

.clearfix:after {
    clear: both;
}

.clearfix:before, .clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

div {
    display: block;
}

body, p, div, li {
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
}

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

.ty-tabs {
    margin-top: 4px;
    vertical-align: bottom;
    border-bottom: 1px solid #e7e7e7;
}

.ty-tabs__list {
    vertical-align: bottom;
}

.ty-tabs__item.active, .ty-tabs .subtab.active {
    background: #fff;
}

.ty-tabs__item, .ty-tabs .subtab {
    float: left;
    vertical-align: bottom;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 0;
    margin: 2px 2px 0 0;
    padding: 0 0 0 3px;
    position: relative;
}

.ty-tabs__a, .ty-tabs .subtab a {
    display: block;
    margin: 8px 20px 0 20px;
    height: 23px;
}

a {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-style: normal;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}

.ty-tabs__item - add display:inline-block; remove : float .ty-tabs__list - add text-align:center — Lalji Tadhani, Sep 16 '15 at 04:55

score 2 · Answer 1 · answered Sep 16 '15 at 04:53

Add following to the ul.

ul {
    ...
    display: table;
    margin: 0 auto;
}

Demo

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
  margin: 0 auto;
}
.clearfix:after {
  clear: both;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
div {
  display: block;
}
body,
p,
div,
li {
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
}
ul {
  padding: 0;
  display: table;
  margin: 0 auto;
  list-style: none;
}
.ty-tabs {
  margin-top: 4px;
  vertical-align: bottom;
  border-bottom: 1px solid #e7e7e7;
}
.ty-tabs__list {
  vertical-align: bottom;
}
.ty-tabs__item.active,
.ty-tabs .subtab.active {
  background: #fff;
}
.ty-tabs__item,
.ty-tabs .subtab {
  float: left;
  vertical-align: bottom;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0;
  margin: 2px 2px 0 0;
  padding: 0 0 0 3px;
  position: relative;
}
.ty-tabs__a,
.ty-tabs .subtab a {
  display: block;
  margin: 8px 20px 0 20px;
  height: 23px;
}
a {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-style: normal;
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

<div class="ty-tabs cm-j-tabs clearfix">
  <ul class="ty-tabs__list">
    <li id="description" class="ty-tabs__item cm-js active"> <a class="ty-tabs__a">Description</a> 
    </li>
    <li id="features" class="ty-tabs__item cm-js active"> <a class="ty-tabs__a">Features</a> 
    </li>
    <li id="discussion" class="ty-tabs__item cm-js active"> <a class="ty-tabs__a">Review</a> 
    </li>
  </ul>
</div>

what's the difference between this and the display: inline-block; text-align: center; method? — Grant9196, Sep 16 '15 at 05:06

score 2 · Answer 2 · answered Sep 16 '15 at 04:55

you need to change your css.

*{margin:0;padding: 0;}

  .clearfix:before, .clearfix:after {
    display: table;
    content: "";
    line-height: 0;

}

.clearfix:after {
    clear: both;
}

.clearfix:before, .clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

div {
    display: block;
}

body, p, div, li {
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
}

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

.ty-tabs {
    /*margin-top: 4px;*/
    vertical-align: bottom;
    border-bottom: 1px solid #e7e7e7;
}

.ty-tabs__list {
    /*vertical-align: bottom;*/
    text-align: center;
}

.ty-tabs__item.active, .ty-tabs .subtab.active {
    background: #fff;
}

.ty-tabs__item, .ty-tabs .subtab {
    /*float: left;*/
    vertical-align: bottom;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 0;
    /*margin: 2px 2px 0 0;*/
    padding:5px 0;
    /*position: relative;*/
    display: inline-block;
}

.ty-tabs__a, .ty-tabs .subtab a {
    display: block;
    margin: 8px 20px 0 20px;
    height: 23px;
}

a {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-style: normal;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}

<div class="ty-tabs cm-j-tabs clearfix">
    <ul class="ty-tabs__list">
        <li id="description" class="ty-tabs__item cm-js active">
            <a class="ty-tabs__a">Description</a>  
        </li>    
        <li id="features" class="ty-tabs__item cm-js active">
            <a class="ty-tabs__a">Features</a>  
        </li> 
        <li id="discussion" class="ty-tabs__item cm-js active">
            <a class="ty-tabs__a">Review</a>  
        </li> 
    </ul>    
</div>

what's the difference between this and the display: inline-block; text-align: center; method? — Grant9196, Sep 16 '15 at 05:06
`display:inline-block` make `li` in a line with inline-block element and `text-align:center` make the child elements (`li`) centralized in this case. you need to do google for more details . — Mukul Kant, Sep 16 '15 at 07:14

score 1 · Answer 3 · answered Sep 16 '15 at 04:56

1

only add the following..

CSS

ul {
 display:table;
 padding: 0;
 margin: 0 auto;
 list-style: none;
}

answered Sep 16 '15 at 04:56

Amit singh

2,006
1
13
19

what's the difference between this and the display: inline-block; text-align: center; method? – Grant9196 Sep 16 '15 at 05:06

score 1 · Answer 4 · answered Sep 16 '15 at 04:57

1

Change Your CSS

    .ty-tabs {
    margin-top: 4px;
    vertical-align: bottom;
    border-bottom: 1px solid #e7e7e7;
    text-align:center;
}

.ty-tabs__list {
    vertical-align: bottom;
}

.ty-tabs__item.active, .ty-tabs .subtab.active {
    background: #fff;
}

.ty-tabs__item, .ty-tabs .subtab {
    display:inline-block;
    vertical-align: bottom;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 0;
    margin: 2px 2px 0 0;
    padding: 0 0 0 3px;
    position: relative;
}

answered Sep 16 '15 at 04:57

Lalji Tadhani

14,041
3
23
40

What's the difference between this method and the display: table; margin: 0 auto; method? – Grant9196 Sep 16 '15 at 05:05
http://stackoverflow.com/questions/2867476/why-should-i-use-displaytable-instead-of-table – Lalji Tadhani Sep 16 '15 at 05:17

score 0 · Answer 5 · answered Sep 16 '15 at 04:54

0

Try out this code works fine on your fiddle:-

ul {
    padding: 0;
    margin:auto;
    list-style: none;
    max-width: 300px; /* as per your preference*/
}

answered Sep 16 '15 at 04:54

Domain

11,562
3
23
44

score 0 · Answer 6 · answered Sep 16 '15 at 05:08

0

you can use the following code

 ul {
  display:table;
  padding: 0;
  margin: 0 auto;
  list-style: none;
 }

answered Sep 16 '15 at 05:08

Daniel

1,438
6
20
37

what's the difference between this and the display: inline-block; text-align: center; method? – Grant9196 Sep 16 '15 at 05:13

CSS center menu

6 Answers6