图片、文字混排:

  不管图片和文字的前后位置,都要给 图片 设置 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. zip文件内存中解压读取

    // 构造zip输入流 ZipInputStream zip = new ZipInputStream(fis,Charset.forName("gbk")); byte[] tm ...

  2. Entity Framework应用:使用Code First模式管理视图

    一.什么是视图 视图在RDBMS(关系型数据库管理系统)中扮演了一个重要的角色,它是将多个表的数据联结成一种看起来像是一张表的结构,但是没有提供持久化.因此,可以将视图看成是一个原生表数据顶层的一个抽 ...

  3. 使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序

    简介: 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说,他们还不习惯去考虑应用程序基本的外观,因为这些以前都是由操作系统来处理的.了解 jQ ...

  4. Windows通用知识讲解一

    Window应用程序的类型 --控制台程序Console DOS程序,本身没有窗口,通过Windows DOS窗口执行 --窗口程序 拥有自己的窗口,可以与用户交互 --库程序 存放代码.数据的程序, ...

  5. C++ c++与C语言的区别(struct类型的加强,函数-变量类型加强,bool类型)

    //区别④:struct类型的加强(C++版本) #include<iostream> using namespace std; //C++中的struct是一个新类型的定义声明 //c+ ...

  6. 关于Unity中的定时器和委托

    一.Invoke定时器 有3种定时器,这里我们讲Invoke 1.创建一个Canvas 2.对Canvas进行初始化 3.创建一个Image的UI节点作为Canvas的子节点,名字叫bg,拖进背景图片 ...

  7. selenium测试(Java)--截图(十九)

    package com.test.screenshot; import java.io.File; import java.io.IOException; import org.apache.comm ...

  8. am335x hid-multitouch.c

    am335x在使用电容屏,需要加载hid-multitouch.ko模块 由下面文件生成 kernel/drivers/hid/hid-multitouch.c 内核中编译模块 make module ...

  9. Spring中 classpath* 和 classpath 前缀的区别

    // org.springframework.core.io.support.ResourcePatternResolver /** * Pseudo URL prefix for all match ...

  10. PHP wamp server问题

    只能说各种不顺,天热人烦! 问题一.wampapache服务不能启动之VCRUNTIME140.DLL文件丢失. 这个是缺少VC运行库,查找并安装相应的文件即可. 问题二.wampapche服务不能启 ...