Как выровнять input в css?
Как поставить лейбл по центру?
.choose-master {
position: relative;
width: 100%;
border: 1px solid #DFDFDF;
border-radius: 4px;
padding: 20px 20px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&__item {
width: 200px;
margin-bottom: 5px;
vertical-align: center;
}
&__text {
font-family: $main-font-family;
font-style: normal;
font-weight: normal;
font-size: 1rem;
line-height: 1.25rem;
color: #222;
cursor: pointer;
// padding-bottom: 5px;
}
&__label {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #222222;
cursor: pointer;
position: relative;
// margin-top: 10px;
&::before {
content: "";
width: 10px;
height: 10px;
display: none;
background-color: #FF7A00;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
&__radio {
display: none;
&:checked + .choose-master__label::before {
display: block;
}
}
}
<div class="choose-master">
<!-- <label for="name" class="appointment-form__label">Choose master:</label> -->
<div class="choose-master__item">
<input type="radio" class="choose-master__radio" name="choose-master__item" id="master-1" value="1">
<label for="master-1" class="choose-master__label"></label>
<label for="master-1" class="choose-master__text">Choose something</label>
</div>
<div class="choose-master__item">
<input type="radio" class="choose-master__radio" name="choose-master__item" id="master-2" value="2">
<label for="master-2" class="choose-master__label"></label>
<label for="master-2" class="choose-master__text">Choose something</label>
</div>
<div class="choose-master__item">
<input type="radio" class="choose-master__radio" name="choose-master__item" id="master-3" value="3">
<label for="master-3" class="choose-master__label"></label>
<label for="master-3" class="choose-master__text">Choose something</label>
</div>
<div class="choose-master__item">
<input type="radio" class="choose-master__radio" name="choose-master__item" id="master-4" value="4">
<label for="master-4" class="choose-master__label"></label>
<label for="master-4" class="choose-master__text">Choose something</label>
</div>
</div>
Ответы (2 шт):
Автор решения: Rapprogtrain
→ Ссылка
Выровнять по центру можешь используя flexbox:
display: flex;
justify-content: center;