Question

我正在使用HTML和CSS实现一个制表符控件，并且有一些模拟的HTML来生成示例表，仅用于布局目的。标签标题的按钮看起来很好，但有一个例外。当它们环绕时，下一行从屏幕左侧开始，即整个标签控件标题保持对齐。

我想要的是标签标题 - 当你添加它们时 - 使用居中对齐，这样他们就开始从中心向外填充页面。即如果你只有一个标题，它应该是宽度的11％，以页面为中心。如果你有两个标题，它们应该都是宽度的11％，总的来说它们中的两个应该居中。

我怎样才能做到这一点？

我的HTML

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>

            <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>
    );
  }

我的CSS

.Tab-link {
  background-color: #555;
  color: white;
  float: left;
  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%;
}

Answer 1

您可以在父元素上使用text-align: center。您也可以在按钮上使用min-width而不是宽度。

.Center-content {
  text-align: center;
}

.Tab-link {
  background-color: #555;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 6px 6px;
  font-size: 14px;
  border-top: 1px solid #777777;
  border-right: 1px solid #777777;
  min-width: 11%;
}

.Tab-link:hover {
  background-color: #777;
}

.Tab-content {
  padding: 100px 20px;
  height: 100%;
}

<div class="Center-content">
  <div id="Home" class="Tab-content">
    <h3>All Books</h3>
    <p>Home is where the heart is..</p>
  </div>

  <div id="News" class="Tab-content">
    <h3>CR</h3>
    <p>Some news this fine day!</p>
  </div>

  <div id="Contact" class="Tab-content">
    <h3>SR</h3>
    <p>Get in touch, or swing by for a cup of coffee.</p>
  </div>

  <div id="About" class="Tab-content">
    <h3>CR-SR</h3>
    <p>Who we are and what we do.</p>
  </div>

  <button class="Tab-link">Heading1</button>
  <button class="Tab-link">Heading2</button>
  <button class="Tab-link">Heading3</button>
  <button class="Tab-link">Heading4</button>

</div>

Answer 2

尝试将链接包装在辅助包装器中并向其添加text-align:center。并将float :left属性替换为display:inline-block

的.Tab-link

HTML：

<div class="text-center">
   <button class="Tab-link">Heading1</button>
   <button class="Tab-link">Heading2</button>
   <button class="Tab-link">Heading3</button>
   <button class="Tab-link">Heading4</button>
</div>

CSS：

.Tab-link {
  background-color: #555;
  color: white;
  display:inline-block;
  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;  
}

使用CSS的按钮中心集合

2 个答案: