How can I center tab labels in CSS? - html

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!