html部分

<div class="box">
<img class="img" src="http://p2.so.qhmsg.com/bdr/_240_/t0196d3945287174d27.jpg" alt="">
<span class="text">111111111</span>
</div>

css部分

        /*方法1:table-cell*/
.box{
display: table-cell;
}
.img{
vertical-align: middle;
}
.text{
vertical-align: middle;
}
        /*方法2:display:flex*/
.box{
display: flex;
/*水平居中*/
justify-content:center;
/*垂直居中*/
align-items:Center;
}
        /*方法3:display:flex和margin:auto*/
.box{
display: flex;
}
.box img{margin: auto 0;}
.box .text{margin: auto 0;}

效果图

css不定高图文垂直居中的三种方法的更多相关文章

  1. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  2. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  3. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

  4. 用css伪类制作三角形的三种方法

    在手机上写三角形的时候,我一般都用伪类,刚开始的时候用的图片,但是在现在的手机高清屏幕上,图片容易失真,还是用伪类吧! 第一种:一个90度的“ > ”, 只有线条.(可以做下拉框的箭头之类的) ...

  5. Div水平垂直居中的三种方法

    百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...

  6. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  7. 顽石系列:CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

  8. CSS围住浮动元素的三种方法

    浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...

  9. 设置css三种方法的优先级

    有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况 1.使用内联式CSS设置“超酷的互联网”文字为粉色. 2.然后使 ...

随机推荐

  1. VC操作Excel之基本操作(颜色等)【转载】

    文章出处https://blog.csdn.net/form88/article/details/78566390 EXCEL里如何知道某种颜色的ColorIndex的值 ===fag::====== ...

  2. centos7 安装 python3

    sudo yum -y groupinstall "Development tools" sudo yum -y install zlib-devel bzip2-devel op ...

  3. JDK源码阅读--HashMap

    public class HashMap<K,V> extends AbstractMap<K,V> implements Map<K,V>, Cloneable, ...

  4. Cesium官方教程9--粒子系统

    原文地址:https://cesiumjs.org/tutorials/Particle-Systems-Tutorial/ 粒子系统介绍 这篇教程带你学习Cesium的粒子相关API,比如如何在你的 ...

  5. Angular+Bootstrap3导航菜单

    Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...

  6. tensorflow/models 下面的data_augment_options的random_image_scale

    这个random_image_scale应该是改变整个图片的大小,而不是“box”图片的大小

  7. JS如何获取地址栏url后面的参数?

    本文不再更新,可能存在内容过时的情况,实时更新请移步我的新博客:JS如何获取地址栏url后面的参数?: 这里提供了两种获取地址栏url后面参数的方法: 方式1 传参: window.location. ...

  8. Python中的sort()

    Python中的sort()方法用于数组排序,本文以实例形式对此加以详细说明: 一.基本形式列表有自己的sort方法,其对列表进行原址排序,既然是原址排序,那显然元组不可能拥有这种方法,因为元组是不可 ...

  9. 一些常见的synthesis attribute

    Noprune A Verilog HDL synthesis attribute that prevents the Quartus II software from removing a regi ...

  10. Python基本数据类型之字典,集合,range

     注: ange()是python的内置函数,用于创建整数的列表,可以生成递增或者递减的数列.ange也是python的内置函数,用于创造xrange对象用于迭代. 在python3中,range() ...