如何将CSS中的标签标签居中？

Question

如何将3个标签按钮（标签1,2和3）放在内容上方的中间？它们现在与左边对齐。除此之外，我还要感谢一个隐藏内容的解决方案，以防用户在手机上。我希望这不是太难。

＆＃13;

＆＃13;

    .tabs {
      position:absolute; bottom:0;
      display: flex;
      flex-wrap: wrap;
    }
    .tabs label {
      order: 1;
      display: block;
      padding: 1rem 2rem;
      margin-right: 0.2rem;
      cursor: pointer;
      background: #90CAF9;
      font-weight: bold;
      transition: background ease 0.2s;
    }
    .tabs .tab {
      order: 99;
      flex-grow: 1;
      width: 100%;
      display: none;
      padding: 1rem;
      background: #fff;
    }
    .tabs input[type="radio"] {
      display: none;
    }
    .tabs input[type="radio"]:checked + label {
      background: #fff;
    }
    .tabs input[type="radio"]:checked + label + .tab {
      display: block;
    }
    
    @media (max-width: 45em) {
      .tabs .tab,
      .tabs label {
        order: initial;
      }
      .tabs label {
        width: 100%;
        margin-right: 0;
        margin-top: 0.2rem;
      }
    }

＆＃13;

    <div class="tabs">
    		<input type="radio" name="tabs" id="tabone" checked="checked">
    		<label for="tabone">Tab One</label>
    		<div class="tab">
    			<h1>Tab One Content</h1>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    		</div>
    		<input type="radio" name="tabs" id="tabtwo">
    		<label for="tabtwo">Tab Two</label>
    		<div class="tab">
    			<h1>Tab Two Content</h1>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    		</div>
    		<input type="radio" name="tabs" id="tabthree">
    		<label for="tabthree">Tab Three</label>
    		<div class="tab">
    			<h1>Tab Three Content</h1>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    		</div>
    	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在justify-content: center上使用Flexbox的 .tabs 与width: 100%对齐页面中心的标签页，例如：

.tabs {
  width: 100%;
  justify-content: center;
}

要关闭移动设备上的标签页，请使用jQuery从checked中删除#tabone属性，例如：

/* If mobile, remove checked attribute (Media Query in JS) */
if (window.matchMedia("(max-width: 45em)").matches) {
  $('#tabone').removeAttr('checked');
}

请查看下面的代码段（使用下面的完整页面视图在中心查看）：

＆＃13;

＆＃13;

/* If mobile, remove checked attribute */
if (window.matchMedia("(max-width: 45em)").matches) {
  $('#tabone').removeAttr('checked');
}

＆＃13;

.tabs {
  position:absolute; bottom:0;
  display: flex;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
.tabs label {
  order: 1;
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background: #90CAF9;
  font-weight: bold;
  transition: background ease 0.2s;
}
.tabs .tab {
  order: 99;
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #fff;
}
.tabs input[type="radio"] {
  display: none;
}
.tabs input[type="radio"]:checked + label {
  background: #fff;
}
.tabs input[type="radio"]:checked + label + .tab {
  display: block;
}

@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }
  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
    <input type="radio" name="tabs" id="tabone" checked="checked">
    <label for="tabone">Tab One</label>
    <div class="tab">
        <h1>Tab One Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <input type="radio" name="tabs" id="tabtwo">
    <label for="tabtwo">Tab Two</label>
    <div class="tab">
        <h1>Tab Two Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <input type="radio" name="tabs" id="tabthree">
    <label for="tabthree">Tab Three</label>
    <div class="tab">
        <h1>Tab Three Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！