积累

一  底部标注信息居中：

<div class="a_a">Copyright (c) 2015-2019   山东神灯管家(有限公司)</div>

样式：

.a_a{
     position: absolute;
     margin: 0 auto;
     left: 0px;
     right: 0px;
     text-align: center;
}

二：

开始写网页用的固定样式开头：

@charset "utf-8";

/* CSS Document */

* {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}

a {
    text-decoration: none;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a img {
    border: none;
}

body {
    margin: 0px;
    padding: 0px;
    position: relative;
}

body,
td,
div,
a,
li,
form {
    font-size: 14px;
    color: #616c73;
    line-height: 20px;
    font-family: Arial, "Microsoft yahei"
}

div,
form,
p,
img,
ul,
ol,
li,
dl,
dt,
dd,
button,
input {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

.clear {
    clear: both !important;
    width: 0px !important;
    height: 0px !important;
    line-height: 0px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    position: static !important;
    background: none !important;
}

.animate {
    -webkit-transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -ms-transition-duration: 0.7s;
    transition-duration: 0.7s;
}


/* For IE 6/7 (trigger hasLayout) */

.fl {
    float: left;
}

.fr {
    float: right;
}

.block {
    display: block !important;
}



.box {
    width: 100%;
    min-width: 1000px;
    margin: 0 auto;
    height: auto;
    
}

.w {
    width: 1100px;
    margin: 0 auto;
}

单独选项选择：

<label class="an_l1 fl" for="jg_¥8800">¥8800</label>
<input class="an_yc" type="radio" name="info[jg]" id="jg_¥8800" value="¥8800" />
<label class="an_l1 fl" for="jg_¥15800">¥15800</label>
<input class="an_yc" type="radio" name="info[jg]" id="jg_¥15800" value="¥15800" />
<label class="an_l1 fl" for="jg_¥22800">¥22800</label>
<input class="an_yc" type="radio" name="info[jg]" id="jg_¥22800" value="¥22800" />
<script type="text/javascript">
        $(function() {
                $("label.an_l1").click(function() {

                       $(this).addClass('active1').siblings('.an_l1').removeClass('active1');
                       $(this).next('input.an_yc').checked = checked;

                 });
         });
</script>

二、利用Display: table;实现img图片垂直居中

html代码：

<div class="tablebox">
　　<div id="imgbox">
　　　　<img src="1.jpg" alt="">
　　</div>
</div>

CSS代码：

.tablebox{background: #fff;display: table}
#imgbox{display: table-cell;vertical-align: middle;}

解释：
1、首先我们先要创建一个div元素以及另外一个包含图片的div元素，然后我们开始设置它的样式。
2、给img父元素设置display属性为table
3、把包裹图片的那个div元素的display属性设置为table-cell
4、为了实现垂直居中，我们现在要做的就是给包裹图片的div元素设置vertical-align: middle;属性

注意：如果你也想实现水平居中，你可以给最外层的div元素添加text-align: center属性，注意不是id=”img”的div