图片、文字混排:

  不管图片和文字的前后位置,都要给 图片 设置 vertical-algin,而不是谁在前面给谁设置。

  此方法兼容IE7+ 和其它主流浏览器。IE7-没有测。

inline-block块元素、行内元素混排:

  同图片和文字的混排,测试IE7+ 和其它主流浏览器。IE7-没有测。

两个行内元素:

  设置vertical-algin并不会使元素在父元素中居中。

vertical-algin:

  w3c:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

  但是测试发现,混排是,只能设置给inline-block和img这种具有宽高特性的元素。

图片文字混排的垂直居中、inline-block块元素和行内元素混排的垂直居中问题的更多相关文章

  1. 块级元素和行内元素的区别 (block vs. inline)

    块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了w ...

  2. block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素

    block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...

  3. CSS中的块级元素(block)与行内元素(inline)

    css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...

  4. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  5. display:inline与display:block——行内元素显示与块级元素显示

    display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...

  6. line-height系列(二)——对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现

    >原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...

  7. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  8. CSS 一些基础知识(优先级、行内元素的一些属性、font-size单位) 怎样不加载图片

    CSS大小写不敏感 选择器优先级如下所示: 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择 ...

  9. div和css:行内元素和块元素的水平和垂直居中

    行内元素: 水平居中:text-align:center ul水平居中:加 display:table; margin:0 auto; 此元素会作为块级表格来显示(类似 <table>), ...

随机推荐

  1. Web API(五):Web API跨域问题

    一.什么是跨域问题 跨域:指的是浏览器不能执行其他网站的脚本.是由浏览器的同源策略造成的,是浏览器施加的安全限制.(服务端可以正常接收浏览器发生的请求,也可以正常返回,但是由于浏览器的安全策略,浏览器 ...

  2. Jquery仿IGoogle实现可拖动窗口(源码)

    google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天仿照iGoogle做了一个简单的小demo. 这个的demo ...

  3. apt-get强制使用Ipv4

    sudo apt-get -o Acquire::ForceIPv4=true update 永久解决办法: 创建文件 /etc/apt/apt.conf.d/99force-ipv4 加入代码: A ...

  4. Spring 4 官方文档学习(十)数据访问之ORM

    http://docs.spring.io/spring/docs/current/spring-framework-reference/html/orm.html 占位用,暂略.

  5. 第二百八十三节,MySQL数据库-MySQL存储过程

    MySQL数据库-MySQL存储过程 MySQL存储过程,也就是有点像MySQL函数,但是他与MySQL函数是有区别的,后面会讲到函数,所以注意区分 注意:函数与存储过程的区别 存储过程是:CREAT ...

  6. erlang工具:Sublime Text的插件

    SublimErl  :https://github.com/ostinelli/SublimErl   (推荐,操作较简单)                                      ...

  7. u3d发布成全屏的方式

    using UnityEngine;   using System.Collections;   public class example : MonoBehaviour {   public voi ...

  8. c++ json cpp

    一 编译链接 1 在相应官网下载jsoncpp 2 解压得到jsoncpp-src-0.5.0文件 3 打开jsoncpp-src-0.5.0 -> makefiles -> vs71 - ...

  9. 数据库ADO方式读取图片

    void Caccess_test_1Dlg::OnBnClickedButton3()//将偏振图像存入数据库 { // TODO: 在此添加控件通知处理程序代码 if (!PathFileExis ...

  10. C#------?和??运算符的作用

    转载: http://www.cnblogs.com/zfanlong1314/archive/2012/02/26/2390456.html 1.?的作用 在处理数据库和其他包含不可赋值的元素的数据 ...