1. <style type="text/css">
    .content{
    width:20%;
    height:60px;
    border:1px solid red;
    text-align:center;
    }
    span{
    height:100%;
    vertical-align:middle;
    line-height:60px;
    }
    img{
    vertical-align:middle;
    }
    </style>
    <div class="content">
    <img src="1.jpg">
    <span>测试一下吧</span>
    </div>

图片和span水平垂直居中的更多相关文章

  1. table-cell实现未知宽高图片,文本水平垂直居中在div

    <BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...

  2. javascript的未知尺寸图片保持比例水平垂直居中函数

    JavaScript的图片在容器内水平垂直居中的函数,利用图片加载获取图片大小,使之在父节点内水平垂直居中 展示方式有两种: 1.当参数keepImageFull为true:保持图片比例,使图片可完整 ...

  3. css中:如何让一个图片(不知道宽高,宽高可能比父元素div大),在父元素div内部水平垂直居中,并且不溢出父元素div,且图片不拉伸变形(可等比例缩小)?

    欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...

  4. css进阶 04-如何让一个元素水平垂直居中?

    04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...

  5. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  6. CSS制作图片水平垂直居中 亲测推荐

    空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...

  7. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  8. CSS实现文字和图片的水平垂直居中

    关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...

  9. css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)

    实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...

随机推荐

  1. python PIL 图像处理库简介(一)

    1. Introduction     PIL(Python Image Library)是python的第三方图像处理库,但是由于其强大的功能与众多的使用人数,几乎已经被认为是python官方图像处 ...

  2. Linux——系统开关机指令简单学习笔记

    关机: 命令名称:shutdown 命令所在路径:/usr/sbin/shutdown 执行权限:root 语法:shutdown 功能描述:关机 范例:# shutdown -h now 重启: 命 ...

  3. Jmeter 抓app包 抓到一半不好用了

    错误描述: java.net.ConnectException: Connection refused (Connection refused) at java.net.PlainSocketImpl ...

  4. 《剑指offer》第三十四题(二叉树中和为某一值的路径)

    // 面试题34:二叉树中和为某一值的路径 // 题目:输入一棵二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所 // 有路径.从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. #i ...

  5. smarty课程---smarty3的安装和使用

    smarty课程---smarty3的安装和使用 一.总结 一句话总结:smarty 是什么,就不多说了,用过php,接触过php的人都对smarty 再熟悉不过了.它是一个很强大的代码分离软件,作为 ...

  6. <yii 框架学习> yii 框架改为中文提示

    工作需要用到yii框架,但发现yii框架自带的提示都是英文的.上网找资料才发现其实可以自己陪置 . 将项目protected/config/main.php里的app配置加上language=> ...

  7. 雷林鹏分享:C# 委托(Delegate)

    C# 委托(Delegate) C# 中的委托(Delegate)类似于 C 或 C++ 中函数的指针.委托(Delegate) 是存有对某个方法的引用的一种引用类型变量.引用可在运行时被改变. 委托 ...

  8. 词向量-LRWE模型-更好地识别反义词同义词

    上一节,我们介绍利用文本和知识库融合训练词向量的方法,如何更好的融合这些结构化知识呢?使得训练得到的词向量更具有泛化能力,能有效识别同义词反义词,又能学习到上下文信息还有不同级别的语义信息. 基于上述 ...

  9. codeforces 578c//Weakness and Poorness// Codeforces Round #320 (Div. 1)

    题意:一个数组arr,一个数字x,要使arr-x的最大子段最小,问该最小值. 三分x,复杂度logn,内层是最大子段的模板,只能用n复杂度的.因为是绝对值最大,正负各求一次,取大的.精度卡得不得了,要 ...

  10. Confluence 6 LDAP 用户结构设置

    用户对象类(User Object Class) 这个是在 LDAP  用户对象中对用户分类的名字.例如: user 用户对象过滤器(User Object Filter) 当对用户对象进行搜索的时候 ...