Wie kann ich Tab-Labels in CSS zentrieren?

Question

Wie kann ich die 3 Label-Buttons (Tab 1, 2 und 3) in der Mitte über dem Inhalt platzieren? Sie sind jetzt nach links ausgerichtet. Darüber hinaus würde ich auch eine Lösung schätzen, um den Inhalt zu verstecken, falls ein Benutzer auf seinem Telefon ist. Ich hoffe, dass das nicht zu schwer ist.

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

Answer 1

Verwenden Flexbox des justify-content: center auf .tabs mit width: 100% die Laschen in der Mitte der Seite auszurichten, wie:

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

Für Lasche auf mobile Geräte schließen, verwenden jQuery Um das checked Attribut von #tabone zu entfernen, wie:

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

Werfen Sie einen Blick auf das Snippet unten (Vollständige Seite Verwendung darunter in der Mitte zu sehen):

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

hoffe, das hilft!