Позиционирование флажков [требует правки]

259

05 сентября 2017, 08:39

нужно переместить чеки на середину изображения, не представляю, как это сделать

Answer 1

Как правило во время вёрстки "флажки" скрывают. Для этого нужно прописать свойство для чек-бокса dispay: none;

Answer 2

как вариант

.block-checkbox-img .block-checkbox { 
position:absolute; 
left:50%; 
top:50%; 
transform:translate(-50%, -50%); 
} 
.block-checkbox-img { 
position:relative; 
display:inline-block; 
}

<div class="block-checkbox-img"> 
<div class="block-checkbox"> 
<input type="checkbox"> 
</div> 
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTR-cX68pgKWvEem88nZrCwAkXyoD1WFbHkepgmFM3Euii6Z2g3Cw" width="100"> 
</div>

Answer 3

* { 
    padding: 0; 
    margin: 0; 
} 
 
.b { 
    display: inline-block; 
    vertical-align: top; 
    border: 1px solid #ccc; 
    position: relative; 
} 
 
.b-checkbox { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
}

<label class="b"> 
    <input type="checkbox" class="b-checkbox" name="checkbox"> 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTR-cX68pgKWvEem88nZrCwAkXyoD1WFbHkepgmFM3Euii6Z2g3Cw" width="100"> 
</label>