购物车中单选按钮样式美化，根据内容垂直居中

原用html自带的checkbox可是样式不美观使用css倒是可以修改，可过程复杂代码量大不适合入门级开发者。

使用a标签代替了选择框，给a的样式设置一个默认背景图片，判断点击时添加一个样式覆盖默认图片

灰色是默认图片 选中则是覆盖的样式图。（可以根据产品图片大小，设置包裹元素的高度）

效果

<div class="radioSp"><a class="check-btn"></a></div>

.radioSp {  width: 10%;   height: 7.5em;  float: left;   text-align: center; }

.check-btn{width: 3em; height:3em; background-image:url(img/check.png);background-size: 3em; display: block; }

.checked{background-image:url(img/checked.png); } （这里是点击后元素添加的class）

---

根据内容垂直居中需在包裹元素设置position: relative; 。按钮元素设置 position:absolute;相对定位，translate是css3属性。根据w3c的介绍transform: translate（）：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标）。

值 translate(-50%,-50%) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

效果

html部分如上。

.radioSp{ width: 10%; height: 150px; float: left; text-align:center; position: relative;}

.check-btn{width: 3em; height:3em; background-image:url(img/check.png);background-size: 3em; position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);}

.checked{background-image:url(img/checked.png); }