http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div

How it works:

  1. When you have two inline-block elements near each other, you can align each to other's side, so with vertical-align: middle you'll get something like this:

  2. When you have a block with fixed height (in px, em or other absolute unit), you can set the height of inner blocks in %.

  3. So, adding one inline-block with height: 100% in a block with fixed height would align another inline-block element in it (<img/> in your case) vertically near it.

　　div内部所有元素都添加vertical-align: middle; display:inline-block

Div 内部所有元素 全部垂直对齐的更多相关文章

  1. vertical-align 属性设置元素的垂直对齐方式。

     值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶 ...

  2. CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

    vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...

  3. 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align

    一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...

  4. div里面的元素垂直均匀分布 按钮引发地址栏出现问号 判断一个数组是否为空 div底部居中 路由传参接受参数

    一个固定高度的div的子元素 在垂直 方向上平均分布 .important-dec{ height: 121px; flex-direction: column; display: flex; jus ...

  5. 两个inline-block元素上下不对齐，出现错位

    摘要: 声明:此文章为转载(点击查看原文),如有侵权24小时内删除.联系QQ:1522025433. 问题描述:在类似 <div class="ovh"> <h3 ...

  6. inline-block元素因基线对齐而造成上浮的问题

    假设我需要实现将三个块级元素并排对齐的如下效果: 代码如下: <!DOCTYPE html> <html lang="en-US"> <head> ...

  7. vertical-align表单元素垂直对齐

    原文地址:http://www.blueidea.com/tech/web/2009/6910.asp 最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio).但是在前 ...

  8. div内部元素居中

    要让div内部元素垂直居中,则给div加上此css样式: .div-vertical-middle{  height:200px;  width:304px;  line-height:50px;  ...

  9. div里面的元素在【垂直 方向】上水平分布 使用calc()函数动态计算

    1==>如何让div里面的元素在[垂直 方向]上水平分布.important-dec{ height: 121px; //必须固定高度 flex-direction: column; //垂直排 ...

随机推荐

  1. 高级I/O之readn和writen函数

    管道.FIFO以及某些设备,特别是终端.网络和STREAMS设备有下列两种性质: (1)一次read操作所返回的数据可能少于所要求的数据,即使还没有达到文件尾端也可能是这样.这不是一个错误,应当继续读 ...

  2. sqlserver 字符串相关函数

    http://www.cnblogs.com/jiajiayuan/archive/2011/06/16/2082488.html 以下所有例子均Studnet表为例:  计算字符串长度len()用来 ...

  3. 炼数成金hadoop视频干货03

    视频地址:http://pan.baidu.com/s/1dDEgKwD 着重介绍了HDFS 运行了示例程序wordcount,自己也试了一遍(用的伪分布式) 1.建立数据(和讲师的操作有些不一样,不 ...

  4. cocos2d-x使用ant打包

    1. 下载apache-ant-1.9.3,然后添加环境变量ANT_HOME = D:\dev_envir\apache-ant-1.9.3(你自己的ant根目录),再在path中添加路径:%ANT_ ...

  5. Url几个常用的函数

    parse_url() 本函数解析一个 URL 并返回一个关联数组,包含在 URL 中出现的各种组成部分. 本函数不是用来验证给定 URL 的合法性的,只是将其分解为下面列出的部分.不完整的 URL ...

  6. Scala中的数组

    数组 数组的两种声明方式,建议声明数组时指定类型. 访问数组元素时获取数组下标 数组Array类本身有很多非常方便的方法 变长数组ArrayBuffer,能够动态增加元素,也可以实现与Array的互转 ...

  7. hdu 4619 最大匹配问题

    思路:把所有涉及到的点按(x+y)的奇偶分成两部分点,对所有的1*2的骨牌,都有(x+y)为偶数的建到奇数的边.求一次最大匹配,就是答案. #include<iostream> #incl ...

  8. Python_sklearn机器学习库学习笔记（五）k-means（聚类）

    # K的选择:肘部法则 如果问题中没有指定 的值,可以通过肘部法则这一技术来估计聚类数量.肘部法则会把不同 值的成本函数值画出来.随着 值的增大,平均畸变程度会减小:每个类包含的样本数会减少,于是样本 ...

  9. NVelocity 实现简单的 CIUD

    1, NVelocity 是 一般处理程序.ashx 和 前台页面模板的桥梁.  2,我们现在建立一个简单的查询:   A,新建项目,把NVelocity.dll拉入项目中,并添加对其引用 B,新建C ...

  10. C# 好书一本推荐

    书名<CLR Via C#>第三版中文版,我已上传: 下载地址:http://files.cnblogs.com/jackchiang/CLR_Via_Csharp.%E7%AC%AC3% ...