小图块的图标和文字居中

偷师某宝

<ul class="piclist">
    <li class="listiem">
        <a href="#">
            <span></span>
            <p>说明1</p>
        </a>
    </li>
    <li class="listiem">
        <a href="#">
            <span></span>
            <p>说明2</p>
        </a>
    </li>
    <li class="listiem">
        <a href="#">
            <span></span>
            <p>说明3</p>
        </a>
    </li></ul>
.piclist {
    margin: 20px 0 0 20px;
}
.listiem {
    float: left;
    margin-right: 10px;
    width: 60px;
    height: 60px;
    background-color: pink;
}
.listiem > a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}
.listiem > a > span {
    display: inline-block;
    margin-top: 10px;
    width: 40px;
    height: 26px;
    background: url("../images/image.png") center top no-repeat;
}

把图和文字都当成内容居中,其中图的span的display属性值要为inline-block

时间: 2024-10-03 00:05:49

小图块的图标和文字居中的相关文章

图标和文字居中

一般按照标准如下写法 <div class="box">    <p><i class="icon4"></i><span class="text">无论怎么看,我都是水平线居中的.</span></p> </div> ============== .box p { width: 80%; height: 40px; line-height: 40px

实现图标Icon+文字在div里自动中心居中(水平垂直居中)

已知div行高设置text-align:center文字会自动居中. 通过:before来设置icon的地址和高宽. 需要设置图片默认的垂直居中条件,与文字一致,为text-bottom. 设置图片行级显示. <!Doctype html><html><head><style>body{margin:0;padding:0;}.con{position:absolute;width:500px;height:50px;border:1px red solid

小图标和文字的居中对齐-小总结

小图标和文字的居中对齐问题,相信大家在很多时候会遇到.今天楼主从其他大神那边扒了一些方法,现在做个小小的总结. 说明:本次用到的小图标来自阿里巴巴矢量图,大家可以去找一下(地址:http://www.iconfont.cn/plus/collections/detail?cid=3223)我的图标尺寸是20px*20px 第一种办法:vertical-align和line-height结合 特点:这种办法只适用于放置小图标和文字的标签的display属性都是inline的情况. 效果图: 代码如

标题栏中小图标和文字垂直居中的解决办法

我们差不多都遇到过这种情况 就是top栏里经常会有图标和文字不对齐的状态 如下图所示: 结构是 <div class="parent"> <i class="icon"></i> <span>中国</span> </div> 这里时候的css是 .parent{ width: 100%; height: 30px; background: #000000; } .icon{ display:in

Android ToolBar标题文字居中的方法

在项目的开发中,使用苹果手机的产品,出的界面效果图极有可能(我这里是一定)完全是按照苹果的界面风格来出的,例如界面顶部的title文字位置是水平居中 如图: 那么问题来了,当我们使用ToolBar控件进行开发时,ToolBar的文字位置默认是靠左对齐的,不过这不能难道聪明的安卓开发者,解决方法如下: 1.只需要在ToolBar中添加TextView控件,设置位置为水平居中即可,代码奉上 <?xml version="1.0" encoding="utf-8"?

css:图标与文字对齐的两种方法

(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src="" class="heart"> <span>1169</span> <img src="" class="comment"

android canvas drawText()文字居中

近期也是在学习自己定义控件,曾经仅仅自己随便玩了下,一直认为比較难,正好如今工作轻松,每天闲着就看看书看看帖子学习自己定义控件,你还别说自己定义控件学起来还是蛮有趣的!! 这里也跟大家分享下我关于drawText()文字居中的方法. 先附上drawText()的方法说明 说实话当时看了这个,我也没明确这个x,y坐标究竟表达的啥意思,还一直以为是绘制文字中心的坐标,后来发现这个理解是错误的 要想理解这个首先看张图 像图上这样安卓的文字绘制是相对于基线绘制的,也就是图中的红线,而top+bottom

css实现一行文字居中,多行文字左对齐

问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框,提示内容比较多时,内容居左对齐.但是其纯CSS实现有点麻烦,一般就放掉这个需求,或者,使用JS实现. 解决方案: 效果如下 CSS实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars

让Spinner中的文字居中

如果套用simple_spinner_item或是simple_spinner_dropdown_item,然后直接在Spinner中用 android:gravity="center" 是无法让Spinner中的文字居中的. 这是因为Spinner中的文字其实是套在TextView中的(参考:http://www.douban.com/note/483280526/?type=like#sep). 一开始我想到的一种办法: 在spinner外面嵌套一个LinearLayout,设置a