积累
一 底部标注信息居中:
<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