How can I center tab labels in CSS?

Question

How can I put the 3 label buttons (tab one, two and three) in the middle above the content? they are now aligned to the left. on top of that I would also appreciate a solution to hide the content in case a user is on his phone. I hope that this is not too hard.

 .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

Use Flexbox's justify-content: center on .tabs with width: 100% to align the tabs in center of the page, like:

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

For closing tab on mobile devices, use jQuery to remove the checked attribute from #tabone , like:

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

Have a look at the snippet below ( use full page view below to see it in center ):

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

Hope this helps!