码迷,mamicode.com
首页 > Web开发 > 详细

css技巧

时间:2018-04-11 16:09:19      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:显示   .com   html   cell   inline   方案   并且   不兼容   伪类   

1.如果ul下有很多li,需要在一行显示,并且设置margin。但是通常要取消第一个li的margin-left。使用:first-child有的浏览器不兼容。

解决:.li+.li{

    margin-left: 5px;

   }

适用场景:单行左对齐,有间距

 

2.多行文字垂直居中

li{
  display:table;
}
li>span{
  display:table-cell;
  vertical-align:middle;
}

3.设置图片宽度100%,高度等于宽度
img{
  width:100%;
  height:0;
  padding-bottom:100%;
}

  

让图片垂直居中一直没有找到一个很好的办法,今天学习重温after伪类的时候突然看到一个解决方案,觉得很好。

技术分享图片
HTML代码:
<body> <div class="pic_box"> <img src="images/img-mobile-1.jpg"/> </div> </body>
技术分享图片
技术分享图片
CSS代码:
<style> .pic_box{ width:300px; height:300px; background-color:#beceeb; font-size:0; *font-size:200px; text-align:center; } .pic_box img{vertical-align:middle;height:100px;} .pic_box:after{ display:inline-block; width:0; height:100%; content:"center"; vertical-align:middle; overflow:hidden; } </style>
技术分享图片

 效果图:

技术分享图片

css技巧

标签:显示   .com   html   cell   inline   方案   并且   不兼容   伪类   

原文地址:https://www.cnblogs.com/wanf/p/8794635.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!