Как центрировать кнопки и сделать их одинакового размера

Question

Я новичок в CSS и пытаюсь сделать страницу. У меня есть 2 переключателя, но я пытаюсь сделать их похожими на обычные кнопки css. Они выглядят довольно похожими, но я не могу их центрировать, и они не имеют одинакового размера. Как я могу это исправить.

* { 
 
    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 1

Я бы обернул этикетку и ввод в отдельный div. Так что это будет что-то вроде этого:

input#quiz-question-one-yes { 
 
    display: none; 
 
    margin: 11px; 
 
} 
 
input#quiz-question-one-no { 
 
    display: none; 
 
    margin: 11px; 
 
} 
 
label#oneYes, label#oneNo { 
 
    background-color: red; 
 
    text-align: center; 
 
    padding: 10px; 
 
    width: 80px; 
 
    display: block; 
 
} 
 

 
.button 
 
{ 
 
    display: inline-block; 
 
}

<div class = "quiz-questions"> 
 
     <div id="first-question" class="visible questions"> 
 
     <div class="button"> 
 
     <input type="radio" id="quiz-question-one-yes" value="yes" /> 
 
     <label for="quiz-question-one-yes" id="oneYes">Yes</label> 
 
     </div> 
 
     <div class="button"> 
 
     <input type="radio" id="quiz-question-one-no" value="no" /> 
 
     <label for="quiz-question-one-no" id="oneNo">No</label> 
 
     </div> 
 
     </div> 
 
    </div>

Это также удалить все неудобный отступы и поля.

Answer 2

есть несколько вариантов для центра:

• один из самых простой вещи: вы можете использовать HTML центра тег:

  <center> <input type="radio" id="quiz-question-one-no" value="no" /> </center> 
  

• Вы можете использовать:

  .input{ 
  margin-left:50%; 
  margin-right:50% 
  } 
  

  Возможно, есть больше вариантов, но это самые легкие варианты.

для того же размера, вам нужно установить минимальную ширину, минимальную высоту на 2 кнопки. Тогда кнопки будут иметь одинаковые размеры. Для текста да и нет, я думаю, что это будет работа.

Answer 3

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