图1

  

      图2

   css制作: 左边一个小图标,右边文字,两者之间一点间隔,再在一个div 里面居中显示。(div不设置宽度)

  第一种做法:

                                  图3

                                  图4

.m-sn {
    font-size: 12px;
    color: #999;
    background-color: #FFF;
    line-height: 22px;
    height: 22px;
    padding-bottom: 24px;
    text-align: center;  // 这是最常用的
}

.m-sn span {
    background: url('http://img.baidu.com/img/iknow/exp/article/article-sprite-v1.png') no-repeat scroll -241px -278px transparent;
    display: inline-block;  // *
    width: 18px;
    height: 15px;
    margin-right: 2px;
    vertical-align: middle;   // *
}

  第二种做法:

                                        图5

                                    图6

其他的:

-----------o

  其实 ,每个所谓li的背景,却是每个li的最后一个元素a元素设置的背景,position设置的是absolute,往上找li的position又是relative(这便是此处a的作用了) :

-----------o

  

  哈哈,本章要记录的是章头说的两种方法,后面的是随手记得。

左边图标右边文字,在div里居中的更多相关文章

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

    已知div行高设置text-align:center文字会自动居中. 通过:before来设置icon的地址和高宽. 需要设置图片默认的垂直居中条件,与文字一致,为text-bottom. 设置图片行 ...

  2. css 如何使图片与文字在div中居中展示?

      1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...

  3. 图片与文字在div里实现垂直水平都居中

    第一种方法,利用盒布局实现   <style type="text/css">/*盒布局实现图片与文字水平垂直居中*/ .div1{ width: 100%; heig ...

  4. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  5. [html][css]让文字在div中居中的方法[转]

    转至:http://dreamweaver.abang.com/od/divcss/a/vertical-align.htm 一.行高(line-height)法 如果要垂直居中的只有一行或几个文字, ...

  6. 文字在div中居中

    话不多说,看代码 div class="div1"> <span class="span2">等级分类法拉盛说的分离卡萨丁</span& ...

  7. Beamer中左边画图, 右边文字解释

    \begin{columns} \column{.4\textwidth} \begin{figure} \centering % Requires \usepackage{graphicx} \in ...

  8. button 左边图片右边文字样式

        状态值 : 正常 状态值 : 选中   #pragma mark - buttonPress- (void)buttonPress:(UIButton * )sender {     if ( ...

  9. UIButton左边图片右边文字的做法

    UIImage *yuyinImage = [UIImage imageNamed:@"yuyin.png"]; [soundButton setImage:yuyinImage ...

随机推荐

  1. Ogre代码学习之1——Ogre中地形lod的基础:deltaHeight的计算

    Ogre的地形系统中的重要概念:高度差,英文HeightDeltas,表示某个完整细节中的顶点,在某个它被隐去的lod中被插值之后的高度和原始高度(即高度图中的高度)之差. DeltaHeight = ...

  2. JVM监控和Java应用程序调试

    JConsole.VisualVM监控JVM(JMX) JAVA_OPTS后加:-Dcom.sun.management.jmxremote.port=8999 -Dcom.sun.managemen ...

  3. 在windows下新建maven项目

    1.拷贝settings到.m2文件下 2.修改文件 3.新建Project项目 4.转换为maven项目 config下转换 5.拷贝pom文件 6.新建目录 src/main/java src/m ...

  4. php实现数字格式化,数字每三位加逗号的功能函数

    原地址:http://www.jb51.net/article/73781.htm php实现数字格式化,数字每三位加逗号的功能函数,具体代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 ...

  5. windows在cmd执行svn 命令

    1. 使用svn 命令行工具. 找到http://www.visualsvn.com/downloads/ 下载Apache Subversion command line tools,这是一个可以在 ...

  6. TCP/IP网络编程中socket的行为

    一. read/write的语义:为什么会阻塞? 先从write说起: #include <unistd.h>ssize_t write(int fd, const void *buf, ...

  7. 我的新发现:AVL树旋转的一个特性

    关于AVL树旋转的代码网络上铺天盖地. 一些经典的实现方法如下: AVLTree SingleLeftRotation(AVLTree A) { AVLTree B = A->left; A-& ...

  8. Prism 5 + MEF中的ModuleCatalog.CreateFromXaml问题

    protected override IModuleCatalog CreateModuleCatalog() { return Microsoft.Practices.Prism.Modularit ...

  9. iOS 杂记

    一,demo 1,视图跳转 MaryPopin:  https://github.com/Backelite/MaryPopin 2,Nimbus是一个开源的iOS框架,比起Three20,Nimbu ...

  10. ruby on rails on windows

    这次想系统学会rails,最终目标是将redmine改造成顺手的工具,主要的手段就是开发redmine插件.虽然网上都推荐使用类Unix系统,可手头只有win7系统,就安装了. 难免会遇到这样那样的问 ...