如何用CSS实现Tab按钮组居中对齐（支持换行场景）

Got it, let's fix this tab alignment issue for you! The problem right now is that using float: left makes your tab buttons stack from the left edge, even when they wrap to a new line. To get that centered, outward-growing behavior you described—single button centered, multiple buttons grouped in the middle—we can use Flexbox, which is ideal for this kind of layout.

Step 1: Wrap Your Tab Buttons in a Container #

First, add a dedicated container around all your .Tab-link buttons. This lets us control the entire group's alignment easily:

public render() { 
  return ( 
    <div className="Center-content"> 
      <div id="Home" className="Tab-content"> 
        <h3>All Books</h3> 
        <p>Home is where the heart is..</p> 
      </div> 
      <div id="News" className="Tab-content"> 
        <h3>CR</h3> 
        <p>Some news this fine day!</p> 
      </div> 
      <div id="Contact" className="Tab-content"> 
        <h3>SR</h3> 
        <p>Get in touch, or swing by for a cup of coffee.</p> 
      </div> 
      <div id="About" className="Tab-content"> 
        <h3>CR-SR</h3> 
        <p>Who we are and what we do.</p> 
      </div>
      {/* New container for tab buttons */}
      <div className="Tab-links-container">
        <button className="Tab-link" >Heading1</button> 
        <button className="Tab-link" >Heading2</button> 
        <button className="Tab-link" >Heading3</button> 
        <button className="Tab-link" >Heading4</button> 
      </div>
    </div> 
  ); 
}

Step 2: Update CSS for Flexbox Layout #

Now modify your CSS to use Flexbox on the container, and remove the float: left from the tab buttons (since Flexbox handles positioning now):

/* Container for tab buttons - centers the group and allows wrapping */
.Tab-links-container {
  display: flex;
  justify-content: center; /* Centers the button group horizontally */
  flex-wrap: wrap; /* Lets buttons wrap to new lines when there's not enough space */
}

.Tab-link { 
  background-color: #555; 
  color: white; 
  /* Remove float: left - we don't need it with Flexbox */
  border: none; 
  outline: none; 
  cursor: pointer; 
  padding: 6px 6px; 
  font-size: 14px; 
  width: 11.11111%; 
  border-top: 1px solid #777777; 
  border-right: 1px solid #777777; 
} 

.Tab-link:hover { 
  background-color: #777; 
} 

/* Style the tab content (and add height:100% for full page content) */ 
.Tab-content { 
  color: white; 
  display: none; 
  padding: 100px 20px; 
  height: 100%; 
}

How This Works #

• display: flex turns the container into a flex container, making its children (the tab buttons) flex items.
• justify-content: center ensures the entire group of buttons stays centered within the container, no matter how many buttons you add.
• flex-wrap: wrap lets buttons move to a new line when they can't fit in the current row—and the new row will also be centered, exactly what you wanted.
• Each button keeps its 11.1111% width, so they'll grow outward from the center as you add more.

Optional: Fix the Last Button's Border #

If you notice the last button in each row has an extra right border, you can add this CSS to clean it up:

.Tab-link:last-child {
  border-right: none;
}

Or if you prefer borders only between buttons, swap border-right for border-left on .Tab-link and remove the left border from the first button with .Tab-link:first-child { border-left: none; }.

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