等比例居中
Posted 雪明瑶
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了等比例居中相关的知识,希望对你有一定的参考价值。
这种情况不再需要左浮动
1)可以每份33.3%,左浮动;
2)每个li 用 vertical-align:middle; display:inline-block(如果左右都是一行,用line-height也是可以实现的);
3)每个li 用text-align:center;
4)小图标里面必须加个空格,要不然它不能正常显示。
<div class="vault-icon vault-icon0"> </div>
<style type="text/css"> * { margin: 0; padding: 0; } a { text-decoration: none; color: #333; } li { list-style: none; } .my-vault { width: 908px; border: 1px solid #e5e5e5; margin: 100px auto; } .vault-t { width: 100%; border-bottom: 1px solid #e5e5e5; padding-top: 13px; padding-bottom: 13px; } .vault-t span { display: block; width: 28px; height: 29px; background: url(img/icon_img.png) no-repeat; background-position: 0 -248px; float: left; margin-left: 20px; } .vault-t b { margin-left: 12px; font-size: 16px; } .vault-m ul { overflow: hidden; } .vault-m li { width: 33.3%; float: left; text-align: center; padding-top: 45px; padding-bottom: 45px; } .vault-m a { display: block; } .vault-m li .vault-icon { width: 81px; height: 82px; vertical-align: middle; display: inline-block; } .vault-m li .vault-icon0 { background: url(img/icon_img.png) no-repeat; background-position: 0 0; } .vault-m li .vault-icon1 { background: url(img/icon_img.png) no-repeat; background-position: 0 -82px; } .vault-m li .vault-icon2 { background: url(img/icon_img.png) no-repeat; background-position: 0 -164px; } .vault-m li .vault-info { margin-left: 15px; display: inline-block; vertical-align: middle; } .vault-m li .vault-info b { color: #e51c23; font-size: 16px; } .vault-m li .vault-info p { margin-top: 5px; } </style>
<div class="my-vault"> <div class="vault-t"> <span></span><b>我的金库</b> </div> <div class="vault-m"> <ul> <li> <a href="#" target="_blank"> <div class="vault-icon vault-icon0"> </div> <div class="vault-info"><b>156</b> <p>我的积分</p> </div> </a> </li> <li> <a href="#" target="_blank"> <div class="vault-icon vault-icon1"> </div> <div class="vault-info"><b>156</b> <p>我的卡券</p> </div> </a> </li> <li> <a href="#" target="_blank"> <div class="vault-icon vault-icon2"> </div> <div class="vault-info"><b>156</b> <p>我的礼包</p> </div> </a> </li> </ul> </div> </div>
背景图 icon_img.png 如图(它是用CssSprite.exe制作出来的哦,很方便~,要记得切图时每个下面多切一像素的空隙,要不排出来会挨住的。)
以上是关于等比例居中的主要内容,如果未能解决你的问题,请参考以下文章