vistavision
Gebruiker
- Lid geworden
- 7 mei 2014
- Berichten
- 18
Hallo allen,
Ik ben al een tijdje aan het stoeien met het uitlijnen van een tekst op een knop, maar ik kom er echt niet uit. Ik heb een radiobutton gestyled als knop en wil het label daarin verticaal in het midden positioneren, maar dat lukt me helaas niet. Zie mijn code via http://jsfiddle.net/HP5jM/:
HTML:
CSS:
Alvast super bedankt voor de hulp (ps, let niet op het lettertype
)!!
Groeten,
Mark
Ik ben al een tijdje aan het stoeien met het uitlijnen van een tekst op een knop, maar ik kom er echt niet uit. Ik heb een radiobutton gestyled als knop en wil het label daarin verticaal in het midden positioneren, maar dat lukt me helaas niet. Zie mijn code via http://jsfiddle.net/HP5jM/:
HTML:
HTML:
<div class="stelling" id="stelling1">
<p class="vraagtekst">Vraag 1</p>
<h2>Wat is uw woonsituatie?</h2>
<ul class="vraaggroep">
<li><label for="1Alleenstaand"><input type="radio" id="1Alleenstaand" name="vraag1" value="1Alleenstaand" />Alleenstaand</label></li>
<li><label for="1Samenwonend"><input type="radio" id="1Samenwonend" name="vraag1" value="1Samenwonend" />Samenwonend</label></li>
<li><label for="1Gezin met kinderen"><input type="radio" id="1Gezin met kinderen" name="vraag1" value="1Gezin met kinderen" />Gezin met kinderen</label></li>
</ul>
</div>CSS:
HTML:
.vraaggroep {
list-style-type:none;
margin:25px 0 0 0;
padding:0;
letter-spacing: -1px;
}
.vraaggroep li {
float:left;
margin:0 5px 0 0;
width: 150px;
border-radius: 8px;
position:relative;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #92C245), color-stop(1, #5d8121));
background-image: -o-linear-gradient(bottom, #92C245 0%, #5d8121 100%);
background-image: -moz-linear-gradient(bottom, #92C245 0%, #5d8121 100%);
background-image: -webkit-linear-gradient(bottom, #92C245 0%, #5d8121 100%);
background-image: -ms-linear-gradient(bottom, #92C245 0%, #5d8121 100%);
background-image: linear-gradient(to bottom, #92C245 0%, #5d8121 100%);
vertical-align: middle;
display: table-cell;
min-height: 50px;
}
.vraaggroep .selected {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fa0d52), color-stop(1, #d4022c));
background-image: -o-linear-gradient(bottom, #fa0d52 0%, #d4022c 100%);
background-image: -moz-linear-gradient(bottom, #fa0d52 0%, #d4022c 100%);
background-image: -webkit-linear-gradient(bottom, #fa0d52 0%, #d4022c 100%);
background-image: -ms-linear-gradient(bottom, #fa0d52 0%, #d4022c 100%);
background-image: linear-gradient(to bottom, #fa0d52 0%, #d4022c 100%);
}
.vraaggroep input[type="radio"] {
opacity:0.011;
z-index:100;
position: absolute;
left: 0px;
}
.vraaggroep input[type="radio"]:checked + label {
background:yellow;
}
.vraaggroep label {
display:block;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
padding:10px 5px 5px 5px;
cursor:pointer;
z-index:90;
color: #fff;
font-size: 22px;
font-weight: bold;
text-align: center;
width: 140px;
min-height: 34px;
margin: auto;
line-height: 18px;
}
.vraaggroep label:hover {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fa0d52), color-stop(1, #d4022c));
background-image: -o-linear-gradient(bottom, #fa0d52 0%, #d4022c 100%);
background-image: -moz-linear-gradient(bottom, #fa0d52 0%, #d4022c 100%);
background-image: -webkit-linear-gradient(bottom, #fa0d52 0%, #d4022c 100%);
background-image: -ms-linear-gradient(bottom, #fa0d52 0%, #d4022c 100%);
background-image: linear-gradient(to bottom, #fa0d52 0%, #d4022c 100%);
border-radius: 8px;
}Alvast super bedankt voor de hulp (ps, let niet op het lettertype
)!!Groeten,
Mark
Laatst bewerkt:
