Html 使中心对齐的选项卡

是我正在处理的WordPress主题选项卡，我正在尝试使选项卡居中对齐。我试图在firebug中进行各种更改，但对齐方式没有准确设置为“中心”，因为当我更改宽度时，对齐方式会变得不对齐。请让我知道如何使选项卡中心对齐，如下图所示，无论宽度如何，都应能正常工作：

/*Tab*/
.shortcode-tab-wrap .tabs {
    list-style: none;
    margin: 0;
}

.shortcode-tab .tabs li.tab {
    float: left;
    position: relative;
}

.shortcode-tab .tabs li.tab a {
    display: block;
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}

.shortcode-tab .tabs li.tab a .separate {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    display: block;
}

.shortcode-tab .tabs-content {
    padding: 20px;
}

.shortcode-left-tab {
    position: relative;
}

.shortcode-left-tab .tabs {
    position: absolute;
    top: 0;
    left: 2px;
    width: 200px;
}

.shortcode-left-tab .tabs li.tab {
    position: relative;
}

.shortcode-left-tab .tabs li.tab a {
    display: block;
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}

.shortcode-left-tab .tabs li.tab a .separate {
    position: absolute;
    top: 0;
    right: -1px;
    width: 1px;
    height: 45px;
    display: block;
}

.shortcode-left-tab .tabs-content {
    margin-left: 202px;
    padding: 20px;
}

.shortcode-tab {
    text-align: center; /* Center tabs */
}

.shortcode-tab .tabs {
    display: inline-block;
    vertical-align: bottom;
}

.shortcode-tab .tabs-content {
    text-align: left; /* Reset content text */
}