css - 在 WordPress 主题中对齐的选项卡中心

Question

目前主题中没有选项可以让 TABS 居中对齐。我尝试使用样式表 (style.css) 中的 CSS，但没有成功。

如何使选项卡居中对齐？

/* tab */
.tab-set {
    margin-bottom: 50px;
}
.tab-set ul.tabs-titles {
    padding: 0;
    height: 32px;
    margin: 0;
    clear: right;
}
.tab-set .tabs-titles li  {
    padding: 15px 35px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    border-right: 1px solid #f6f6f6;
    float: left;
    list-style-type: none;
    cursor: pointer;  
}
.tab-set .tabs-titles li:last-child {
    border-right: none;
}
.tab-set .tabs-titles li.current {
    padding: 15px 35px;
    position: relative;
    top: 1px;
    color: #575a5c;
    background: #f6f6f6;
}
.tab-set .tab-content {
    padding: 20px 20px 10px;
    background-color: #f6f6f6;
    clear: both;
}
.tab-content p {
    padding: 0;
}
.tab-set.white .tabs-titles li  {
    border-right: 1px solid #fff;
}

.tab-set.white .tabs-titles li.current {
    background: #fff;
}
.tab-set.white .tab-content {
    background-color: #fff;
}

Answer 1

很难猜测问题，因为没有 html 来确保结构正确。为了使代码更简洁，我会这样做并更新以下内容:

.tab-set ul.tabs-titles {
     padding: 0;
     margin: 0;
     width: 100%;
     display: inline-block;
     text-align: center;
}
.tab-set .tabs-titles li {
     padding: 15px 35px;
     color: #fff;
     font-size: 16px;
     font-weight: 800;
     text-transform: uppercase;
     border-right: 1px solid #f6f6f6;
     display: inline-block;
}
.tab-set .tabs-titles li.current {
     color: #575a5c;
     background: #f6f6f6;
}

除非需要，否则不要尝试设置固定高度，因为那样会使元素看起来很乱。让填充/行高决定高度。我还删除了一些重复项。例如，对 .current 应用相同的填充只是在做同样的事情。希望这会有所帮助。

编辑: 这是我的代码笔，可以看到它的实际效果:https://codepen.io/thecenteno/pen/LYYgMpv