WordPress主题中实现标签页居中对齐的方法

Got it, let's get those tab titles centered for you! The issue with your current CSS is that the tab list items are using float: left, which makes the parent <ul> align its content to the left by default. Here are two reliable solutions to fix this:

Solution 1: Use Flexbox (Modern & Recommended) #

Flexbox is the cleanest way to center elements horizontally and vertically. Update your CSS like this:

/* Update the tab container to use flexbox for centering */
.tab-set ul.tabs-titles {
  padding: 0;
  margin: 0;
  clear: right;
  display: flex;
  justify-content: center; /* Centers tabs horizontally */
  align-items: center; /* Centers tabs vertically (adjust if needed) */
  height: auto; /* Let the height adapt to your tab content, or keep 32px if you want fixed height */
}

/* Remove float: left from tab items (flex handles layout now) */
.tab-set .tabs-titles li {
  padding: 15px 35px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  border-right: 1px solid #f6f6f6;
  list-style-type: none;
  cursor: pointer;
  /* Remove float: left here */
}

/* Adjust the active tab's positioning (optional, since flex fixes alignment) */
.tab-set .tabs-titles li.current {
  padding: 15px 35px;
  position: relative;
  top: 0; /* Remove the top: 1px unless you still need the slight offset */
  color: #575a5c;
  background: #f6f6f6;
}

Solution 2: Use Inline-Block (For Older Browser Compatibility) #

If you need to support older browsers that don't fully support flexbox, use this approach instead:

/* Make the tab container center its inline-block children */
.tab-set ul.tabs-titles {
  padding: 0;
  height: 32px;
  margin: 0;
  clear: right;
  text-align: center; /* This centers the inline-block tabs */
}

/* Replace float: left with display: inline-block */
.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; /* Replaces float: left */
  list-style-type: none;
  cursor: pointer;
  margin-right: -4px; /* Fixes small gap between inline-block elements */
}

Important Note: #

Instead of editing your theme's style.css directly (which will get overwritten when you update the theme), add these CSS changes to your WordPress site's Custom CSS section:

1. Go to Appearance > Customize in your WordPress dashboard
2. Look for the Additional CSS tab
3. Paste the modified code there and save

内容的提问来源于stack exchange，提问作者Yosif Mihaylov