如何横向中心UL？

Question

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>

任何人都可以帮助我如何横向居中导航栏？我试过保证金0自动但是没有用，任何人都可以告诉我任何改变方法来实现这个结果？

Answer 1

方法A）

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

方法B）

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将display: inline-block添加到.theme-tabs班级，然后移除width: 100%。

.theme_tabs{
    list-style: none;
    padding-left: 0;
    display: inline-block;
    max-width: 1200px;
    margin: 0 auto;
}

Answer 3

添加以下样式

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

尝试设置其position: relative 它的left: 50% 并尝试使用transform进行游戏，这样你就可以集中精力。

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>