How to Center Radio Button
11,270
Solution 1
See this fiddle
Remove float:left;
from your CSS for .tab
and add display:inline-block;
Also, add
.allTabs {
text-align: center;
}
to your CSS
So, the complete CSS would be as below
.allTabs {
text-align: center;
}
.tabs {
min-height: 200px;
clear: both;
}
.tab {
display: inline-block;
}
.tab label {
background: white;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab[type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border-top: 4px solid #DADEDE;
margin-top: 4px;
}
[type=radio]:checked ~ label {
background: white;
padding-bottom: 0px;
border-bottom: 4px solid blue;
margin-bottom: 5px;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
Solution 2
Remove the floats and try...
.allTabs {
text-align: center;
}
.tab {
display: inline-block;
}
Author by
Admin
Updated on June 12, 2022Comments
-
Admin almost 2 years
For my webpage I am using radio buttons to make tabs with content on the top of my webpage. I want the tabs to be centered in the screen. I tried to use display: flex and text-align: justify but it didn't work. Is there a simple way to center the radio buttons? Any help would be appreciated.
Here is the HTML
<body> <div class="allTabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">Tab One</label> <div class="content"> stuff 1 </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">Tab Two</label> <div class="content"> stuff 2 </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">Tab Three</label> <div class="content"> stuff 3 </div> </div>
Here is the CSS
.tabs { min-height: 200px; /* This part sucks */ clear: both; } .tab { float: left; } .tab label { background: white; padding: 10px; border: 1px solid #ccc; margin-left: -1px; position: relative; left: 1px; } .tab [type=radio] { display: none; } .content { position: absolute; top: 28px; left: 0; background: white; right: 0; bottom: 0; padding: 20px; border-top: 4px solid #DADEDE; margin-top: 4px; } [type=radio]:checked ~ label { background: white; padding-bottom: 0px; border-bottom: 4px solid blue; margin-bottom: 5px; z-index: 2; } [type=radio]:checked ~ label ~ .content { z-index: 1; }
Here is the JSFiddle https://jsfiddle.net/mk8r6kL0/