html - How to fix the alignment/position of a image label (for checkboxes/radio buttons)? -
code taken 2 different sources, append dont have 10 rep post them.
first attempt. notice horribly placed radio buttons.
second attempt. donot know source, direct google result. notice difference between top , bottom padding/alignment.
i tried using [li]
element didnt work.
adding img{display: block;}
css gives unexpected results. "fills" whole element image, , left part of image hidden behind green part.
i self-professed css/html noob, can understand things , simple things placement/alignment still mystery me.
i'd know how code works. planning add green border "selected" "button" , change minor visual stuff. i'd know how center "tick" , implement "tick" mark locally/globally , not rely on content:'\2714';
.
help me understand happening here, , how can fix (and apply knowledge in future).
edit : updated 2nd attempt, looking quite good, imho. if alignment fixes.... sigh.
ok, sound silly...
i added :
img { display:block; margin: 5px 5px 5px 45px; }
and edited margins... working properly.
but still dont understand why there bad space @ bottom.
here's new version : http://jsfiddle.net/xwussun1/5/
**edit : ** fixed tick mark position adding line-height: 6;
.
Comments
Post a Comment