如何创建标签可见的图像单选按钮

Question

我有一个图像单选按钮，但是，我希望标签在图像居中下方可见？

但是，标签出现在图像的顶部吗？

如何才能使标签在图像下方对齐？

下面是一个例子：https://codepen.io/anon/pen/dBYWaK

<div class="cc-selector">
   <input id="cat" type="radio" name="credit-card" value="cat" />
   <label class="drinkcard-cc cat" for="cat">Heading 1</label>
   <input id="dog" type="radio" name="credit-card" value="dog" />
   <label class="drinkcard-cc dog" for="dog">Heading 2</label>
</div>

Answer 1

您可以使用

.drinkcard-cc {
  padding-top:80px;
}

Answer 2

我会将输入和标签分组到一个div和中，并在输入中使用背景而不是标签。

​

#cc-selector .card{
    display: inline-block;
}

#cc-selector input{
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;

}

#cc-selector .background {
    width: 100px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
    filter: brightness(1.8) grayscale(1) opacity(.7);
    outline: none;
}

#cc-selector .card.cat .background {
    background-image: url(http://placekitten.com/400/300);
}

#cc-selector .card.dog .background {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg);
}

#cc-selector .background:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
    -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
    filter: brightness(1.2) grayscale(.5) opacity(.9);
}

#cc-selector input:checked {
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
    color: red;
}

#cc-selector label{
    text-align: center;
    width: 100%;
    display: block;
}

<div id="cc-selector">
    <div class="card cat">
        <input class="background" id="cat" value="cat" name="animal" type="radio" />
        <label for="cat">Cat</label>
    </div>
    <div class="card dog">
        <input class="background" id="dog" value="dog" name="animal" type="radio" />
        <label for="dog"> Dog</label>
    </div>
</div>

​