How do I center text in this scenario? - html

Question

I want to center the label vertically within the <li>, and add some padding to the label. How can I do this? Sorry if this is a dumb question, this is for a school project due tommorow.
TBH this is mostly stolen from this JSFiddle.
In context. In JSFiddle
:root{
--cream: #ECD9BA;
--wood: #824936;
--slate: #222C2A;
--white: #FFF;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-clip: border-box;
}
.q-wrap{
display: flex;
justify-content: center;
}
.question {
width: 80%;
display: flex;
flex-direction: column;
list-style-type: none;
}
.question li {
width: 100%;
min-height: 5rem;
margin: .5rem 0;
padding: 2rem 0;
position: relative;
}
.question label,
.question input {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.question input[type="radio"] {
opacity: 0;
}
.question input[type="radio"]:checked+label {
background-color: #E62222;
}
.question input[type="radio"].correct:checked+label {
background-color: #559905;
}
.question label {
font-size: 2rem;
font-weight: 900;
padding: 5px;
background-color: var(--wood);
color: var(--cream);
border: 2px solid var(--cream);
border-radius: 1rem;
cursor: pointer;
z-index: 90;
}
.question label:hover {
filter: brightness(110%)
}
.question input[type="radio"]:checked+label:hover{
filter: brightness(105%);
}
<div class="q-wrap">
<ul class="question">
<li>
<input type="radio" id="b2b" name="amount" />
<label for="b2b">B2B</label>
</li>
<li>
<input type="radio" id="p2p" class="correct" name="amount"/>
<label for="p2p">P2P</label>
</li>
<li>
<input type="radio" id="b2a" name="amount" />
<label for="b2a">B2A</label>
</li>
<li>
<input type="radio" id="c2c" name="amount" />
<label for="c2c">C2C</label>
</li>
</ul>
</div>
I tried adding padding-left: 2rem to .question label, but it doesn't work
Also, how do I make code snippets in Stack Overflow? I don't see the button for it, even though there are screenshots with it there.