-1

nav{
  display: block;
  text-align: center;
}
.theme_tabs{
  list-style: none;
  padding-left: 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.theme_tab_item.active{
  border-top-color: #0069ff;
}
.theme_tab_item{
  display: block;
  border-top: 2px solid #e5e8ed;
  padding: 16px;
  transition: border-left-color .25s linear;
  float: left;
}
.theme_tab_item.active a{
  color: #031b4e;
  cursor: default;
}
.theme_tab_item a{
  color: rgba(3,27,78,.5);
  font-size: 18px;
  transition: color .25s linear;
}
<nav>
  <ul class="theme_tabs small_margin">
    <li class="theme_tab_item active">
        <a>Example1</a>
      </li>
      <li class="theme_tab_item">
        <a>Example2</a>
      </li>
      <li class="theme_tab_item">
        <a>Example3</a>
      </li>
  </ul>
</nav>

Anyone can please help me How can I horizontally center navigation bar? I tried margin 0 auto but that was not working anyone can please tell me any alter way to achieve this result?

Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
shah rushabh
  • 155
  • 1
  • 1
  • 8
  • 1
    Possible duplicate of [How do I center align horizontal
      menu?](https://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu)
     – Rob May 26 '18 at 11:45

4 Answers4

0

Method A)

.theme_tab_item {
  display: block;<--------change to inline-block
  float: left;<-----------remove
  //other codes
}


nav{
  display: block;
  text-align: center;
}
.theme_tabs{
  list-style: none;
  padding-left: 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.theme_tab_item.active{
  border-top-color: #0069ff;
}
.theme_tab_item{
  display: inline-block;
  border-top: 2px solid #e5e8ed;
  padding: 16px;
  transition: border-left-color .25s linear;
}
.theme_tab_item.active a{
  color: #031b4e;
  cursor: default;
}
.theme_tab_item a{
  color: rgba(3,27,78,.5);
  font-size: 18px;
  transition: color .25s linear;
}
<nav>
  <ul class="theme_tabs small_margin">
    <li class="theme_tab_item active"><a>Example1</a></li>
    <li class="theme_tab_item"><a>Example2</a></li>
    <li class="theme_tab_item"><a>Example3</a></li>
  </ul>
</nav>

Method B)

.theme_tabs{
  width: 100%;<-----remove
  display: inline-block;<----add
  //Other codes...
}


nav{
  display: block;
  text-align: center;
}
.theme_tabs{
  list-style: none;
  padding-left: 0;
  display: inline-block;
  max-width: 1200px;
  margin: 0 auto;
}
.theme_tab_item.active{
  border-top-color: #0069ff;
}
.theme_tab_item {
  display: block;
  border-top: 2px solid #e5e8ed;
  padding: 16px;
  transition: border-left-color .25s linear;
  float: left;
}
.theme_tab_item.active a{
  color: #031b4e;
  cursor: default;
}
.theme_tab_item a {
  color: rgba(3,27,78,.5);
  font-size: 18px;
  transition: color .25s linear;
}
<nav>
  <ul class="theme_tabs small_margin">
    <li class="theme_tab_item active"><a>Example1</a></li>
    <li class="theme_tab_item"><a>Example2</a></li>
    <li class="theme_tab_item"><a>Example3</a></li>
  </ul>
</nav>
Ehsan
  • 12,655
  • 3
  • 25
  • 44
0

Just add display: inline-block to your .theme-tabs class and remove width: 100%.

.theme_tabs{
    list-style: none;
    padding-left: 0;
    display: inline-block;
    max-width: 1200px;
    margin: 0 auto;
}
Fab
  • 4,526
  • 2
  • 21
  • 45
0

Add the following style

.theme_tabs{
  display: flex;
  justify-content: center;
}


nav{
  display: block;
  text-align: center;
}
.theme_tabs{
  display: flex;
  justify-content: center;
  list-style: none;
  padding-left: 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.theme_tab_item.active{
  border-top-color: #0069ff;
}
.theme_tab_item{
  display: block;
  border-top: 2px solid #e5e8ed;
  padding: 16px;
  transition: border-left-color .25s linear;
  float: left;
}
.theme_tab_item.active a{
  color: #031b4e;
  cursor: default;
}
.theme_tab_item a{
  color: rgba(3,27,78,.5);
  font-size: 18px;
  transition: color .25s linear;
}
<nav>
  <ul class="theme_tabs small_margin">
    <li class="theme_tab_item active">
        <a>Example1</a>
      </li>
      <li class="theme_tab_item">
        <a>Example2</a>
      </li>
      <li class="theme_tab_item">
        <a>Example3</a>
      </li>
  </ul>
</nav>
Nandita Sharma
  • 13,287
  • 2
  • 22
  • 35
0

try setting its position: relative its left: 50% and try playing around with transform so you can center it.

nav{
  display: block;
  text-align: center;
}
.theme_tabs{
  list-style: none;
  padding-left: 0;
  width: 100%;
  max-width: 1200px;
  transform: translate(-25%, 0);
  position: relative;
  left: 50%;
  display: inline-block;
}
.theme_tab_item.active{
  border-top-color: #0069ff;
}
.theme_tab_item{
  display: block;
  border-top: 2px solid #e5e8ed;
  padding: 16px;
  transition: border-left-color .25s linear;
  float: left;
}
.theme_tab_item.active a{
  color: #031b4e;
  cursor: default;
}
.theme_tab_item a{
  color: rgba(3,27,78,.5);
  font-size: 18px;
  transition: color .25s linear;
}
<nav>
  <ul class="theme_tabs small_margin">
    <li class="theme_tab_item active">
        <a>Example1</a>
      </li>
      <li class="theme_tab_item">
        <a>Example2</a>
      </li>
      <li class="theme_tab_item">
        <a>Example3</a>
      </li>
  </ul>
</nav>
Damian
  • 113
  • 8