如何在 CSS 中居中標簽標簽？

Question

如何將 3 個標簽按鈕（標簽一、二和三）放在內容上方的中間？ 它們現在向左對齊。 最重要的是，我還希望有一個解決方案來隱藏內容，以防用戶使用手機。 我希望這不會太難。

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

 <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>

Answer 1

使用 Flexbox 的justify-content: center on .tabs with width: 100%對齊頁面中心的選項卡，例如：

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

要在移動設備上關閉選項卡，請使用 jQuery 從#tabone刪除checked屬性，例如：

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

看看下面的片段（使用下面的全頁視圖在中心查看）：

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

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

 <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>

希望這可以幫助！