css基础组件库（兼容低版本）

转载于 2015-08-02 10:51:55 发布 · 167 阅读

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000003043353

本文介绍两种布局技巧：一是实现图标与文字在一行内混排的方法，通过设置适当的line-height值和vertical-align属性；二是实现元素在容器内上下垂直居中的方法，特别是在需要兼容低版本浏览器的情况下使用padding替代line-height。

1、图标跟文字混排
html

<div class="link">
    <span class="icon wyyx"></span>
    分享
</div>

css

.link{
    width: 92px;
    border: 1px solid #0f0;
    line-height: 18px;
}
.icon{
    display: inline-block;
    *zoom: 1;
    vertical-align: bottom;
}
.wyyx{
    width: 18px;
    height: 18px;
    background: url(http://p2.qhimg.com/t0116804ffa3cc8a59f.png) no-repeat;
}

截图：
图片描述

注意：

父容器的line-height值与图标的高度相等，另保持设置图标的vertical-align的值为bottom。

2、上下垂直居中，需要兼容低版本的浏览器时用padding比用line-height要好很多。