Mani Mani - 2 months ago 5
CSS Question

How to center the buttons and make them same size

I am new to CSS and trying to make a page. I have 2 radio buttons but I am trying to make them appear like regular buttons using css.
They look pretty similar but I am unable to center them and they are not the same size. How can I fix this.



* {
box-sizing: border-box;
background-color: #bf2e1a;
}
header {
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 100px;
margin-left: 650px;
margin-right: 650px;
margin-top: 150px;
text-align: center;
font-size: 60px;
border-width: 5px;
}
div#get-justice {
position: relative;
top: 30px;
padding-top: 10px;
background-color: #EFDFBC;
margin: 0 auto;
width: 600px;
height: 600px;
}
div#get-justice p {
background-color: #EFDFBC;
color: red;
padding: 40px 40px 4px 40px;
font-size: 28px;
}
div#get-justice button {
background-color: red;
border: none;
color: white;
margin-top: 120px;
padding: 20px 37px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
cursor: pointer;
}
h3 {
background: #EFDFBC;
padding-top: 45px;
text-align: center;
color: red;
font-size: 23px;
}
/*div#first-question {
margin: 0px auto;
width: 650px;
height: 460px;
background: #EFDFBC;
}*/

ul {
columns: 2;
background: #EFDFBC;
}
li {
text-align: -webkit-match-parent;
background: #EFDFBC;
display: block;
padding: 1px 0px 3px 37px;
}
input#quiz-question-one-yes {
display: none;
margin: 11px;
}
input#quiz-question-one-no {
display: none;
margin: 11px;
}
label#oneYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#oneNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-two-yes {
display: none;
margin: 11px;
}
input#quiz-question-two-no {
display: none;
margin: 11px;
}
label#twoYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#twoNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-three-yes {
display: none;
margin: 11px;
}
input#quiz-question-three-no {
display: none;
margin: 11px;
}
label#threeYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#threeNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-four-yes {
display: none;
margin: 11px;
}
input#quiz-question-four-no {
display: none;
margin: 11px;
}
label#fourYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fourNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
input#quiz-question-five-yes {
display: none;
margin: 11px;
}
input#quiz-question-five-no {
display: none;
margin: 11px;
}
label#fiveYes {
display: inherit;
margin: 13px 360px 0px 195px;
padding: 8px 73px 8px 22px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
label#fiveNo {
display: inherit;
margin: -54px 296px 0px 300px;
padding: 12px 66px 5px 18px;
background-color: red;
border-color: #ddd;
font-size: 33px;
text-align: center;
}
.hidden {
display: none;
}
.visible {
display: block;
margin: 0 auto;
width: 650px;
height: 369px;
background: #EFDFBC;
}
.questions {
margin: 0px auto;
width: 650px;
height: 654px;
background: #EFDFBC;
}
.questions-header {
color: #EFDFBC;
border-style: solid;
border-color: #EFDFBC;
top: 100px;
padding-bottom: 30px;
padding-top: 30px;
margin-top: 150px;
text-align: center;
font-size: 60px;
border-width: 5px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"/>
<title>Questions</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "quiz-questions">
<div id="first-question" class="visible questions">
<h1 class = "questions-header"> Question 1 </h1>
<h3>Do you see number 1 to 5</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<hr>
<input type="radio" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
</div>
</div>
</body>
</html>




Answer

* {
    box-sizing: border-box;
    background-color: #bf2e1a;
}
header {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 100px;
    margin-left: 650px;
    margin-right: 650px;
    margin-top: 150px;
    text-align: center;
    font-size: 60px;
    border-width: 5px;
}
div#get-justice {
    position: relative;
    top: 30px;
    padding-top: 10px;
    background-color: #EFDFBC;
    margin: 0 auto;
    width: 600px;
    height: 600px;
}
div#get-justice p {
    background-color: #EFDFBC;
    color: red;
    padding: 40px 40px 4px 40px;
    font-size: 28px;
}
div#get-justice button {
    background-color: red;
    border: none;
    color: white;
    margin-top: 120px;
    padding: 20px 37px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 21px;
    cursor: pointer;
}
h3 {
    background: #EFDFBC;
    padding-top: 45px;
    text-align: center;
    color: red;
    font-size: 23px;
}
div#first-question {
   text-align: center;
}

ul {
    columns: 2;
    background: #EFDFBC;
}
li {
    text-align: -webkit-match-parent;
    background: #EFDFBC;
    display: block;
    padding: 1px 0px 3px 37px;
}
input#quiz-question-one-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-one-no {
    display: none;
    margin: 11px;
}
label#oneYes {
    display: inline-block;
    margin: 10px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#oneNo {
    display: inline-block;
    margin: 10px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-two-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-two-no {
    display: none;
    margin: 11px;
}
label#twoYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#twoNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-three-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-three-no {
    display: none;
    margin: 11px;
}
label#threeYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#threeNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-four-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-four-no {
    display: none;
    margin: 11px;
}
label#fourYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fourNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-five-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-five-no {
    display: none;
    margin: 11px;
}
label#fiveYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fiveNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
.hidden {
    display: none;
}
.visible {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 369px;
    background: #EFDFBC;
}
.questions {
    margin: 0px auto;
    width: 650px;
    height: 654px;
    background: #EFDFBC;
}
.questions-header {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 100px;
    padding-bottom: 30px;
    padding-top: 30px;
    margin-top: 150px;
    text-align: center;
    font-size: 60px;
    border-width: 5px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8"/>
    <title>Questions</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class = "quiz-questions">
      <div id="first-question" class="visible questions">
        <h1 class = "questions-header"> Question 1 </h1>
        <h3>Do you see number 1 to 5</h3>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul>
        <hr>
        <input type="radio" id="quiz-question-one-yes" value="yes" />
        <label for="quiz-question-one-yes" id="oneYes">Yes</label>
        <input type="radio" id="quiz-question-one-no" value="no" />
        <label for="quiz-question-one-no" id="oneNo">No</label>
      </div>
    </div>
  </body>
</html>