Question

我的网站上的标签菜单中心存在问题。我已经尝试了以前在其他问题上发表过的几个解决方案，但由于它们对我不起作用，我希望你也可以帮助我。

＆＃13;

directives.directive('clickAndWait', function() {
    var directiveConfig = {

        restrict: 'A',
        scope: {
            asyncAction: '&clickAndWait',
        },
        link: function(scope, element) {
            element.bind('click', function() {

                element.prop('disabled', true);
                scope.$apply(function() {
                    scope.asyncAction().finally(function() {
                        element.prop('disabled', false);
                    });
                });
            });
        }
    };

    return directiveConfig;
});

＆＃13;

/*----- Tab Links -----*/


/* Clearfix */

.tab-links:after {
  display: block;
  clear: both;
  content: '';
}

.tab-links {
  width: 100%;
  border-bottom: 1px solid #e6e6e6;
  margin: auto 0;
  margin-bottom: 15px;
}

.tab-links li {
  margin: auto 0;
  margin-left: 2px;
  /*float:left;*/
  display: inline-block;
  list-style: none;
}

.tab-links a {
  padding: 9px 10px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #808080;
  text-decoration: none;
  text-align: center;
}

.tab-links a:hover {
  color: #2ebb98;
}

li.active a,
li.active a:hover {
  color: #2ebb98;
  border-bottom: 2px solid #2ebb98;
}

＆＃13;

每个标签的文本都很好地居中，但实际菜单本身并不居中。有没有人知道如何让它居中？

Answer 1

由于<li>为inline-block，您可以添加padding-left:0;（默认情况下，浏览器向ul添加填充）和text-align:center;给您<ul>。

＆＃13;

/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
  display:block;
  clear:both;
  content:'';
}

.tab-links {
  width: 100%;
  border-bottom: 1px solid #e6e6e6;
  margin: auto 0;
  margin-bottom: 15px;
  text-align: center;
  padding-left: 0;
}
.tab-links li {
  margin: auto 0;
  margin-left: 2px;
  /*float:left;*/
  display: inline-block;
  list-style:none;
}

.tab-links a {
  padding:9px 10px;
  display:inline-block;
  font-size:12px;
  font-weight:600;
  color:#808080;
  text-decoration: none;
  text-align: center;
}

.tab-links a:hover {
  color:#2ebb98;
}

li.active a, li.active a:hover {
  color:#2ebb98;
  border-bottom: 2px solid #2ebb98;
}

＆＃13;

<ul class="tab-links">
  <li class="active"><a href="#tab1">Tab One</a></li>
  <li><a href="#tab2">Tab two</a></li>
  <li><a href="#tab3">Tab three</a></li>
  <li><a href="#tab4">Tab four</a></li>
  <li><a href="#tab5">Tab five</a></li>
  <li><a href="#tab6">Tab six</a></li>
  <li><a href="#tab7">Tab seven</a></li>
</ul>

＆＃13;

Answer 2

使元素flex是一种证明内容合理性的好方法。

.tab-links {
    display: flex;
    justify-content: center;
}

Answer 3

.tab-links内的您的内容为inline-block。

只需将text-align: center;添加到.tab-links即可。

就是这样。

.tab-links {
  text-align: center;
}

<强>样本

 /*----- Tab Links -----*/


    /* Clearfix */
    .tab-links:after {
      display: block;
      clear: both;
      content: '';
    }

    .tab-links {
      width: 100%;
      border-bottom: 1px solid #e6e6e6;
      margin: auto 0;
      margin-bottom: 15px;
      
      /* UPDATED CODE */
      
      text-align: center;
    }

    .tab-links li {
      margin: auto 0;
      margin-left: 2px;
      /*float:left;*/
      display: inline-block;
      list-style: none;
    }

    .tab-links a {
      padding: 9px 10px;
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      color: #808080;
      text-decoration: none;
      text-align: center;
    }

    .tab-links a:hover {
      color: #2ebb98;
    }

    li.active a,
    li.active a:hover {
      color: #2ebb98;
      border-bottom: 2px solid #2ebb98;
    }

    <ul class="tab-links">
      <li class="active"><a href="#tab1">Tab One</a></li>
      <li><a href="#tab2">Tab two</a></li>
      <li><a href="#tab3">Tab three</a></li>
      <li><a href="#tab4">Tab four</a></li>
      <li><a href="#tab5">Tab five</a></li>
      <li><a href="#tab6">Tab six</a></li>
      <li><a href="#tab7">Tab seven</a></li>
    </ul>

使用CSS对中标签

3 个答案: