图片、文字混排:

  不管图片和文字的前后位置,都要给 图片 设置 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. libmysqlclient16 libmysqlclient-dev

    如果提示安装 libmysqlclient16 则用 libmysqlclient-dev 代替之

  2. Cygwin镜像使用帮助

    Cygwin镜像使用帮助 收录架构 x86 x86_64 收录版本 所有版本 更新时间 每12小时更新一次   使用说明 选择从互联网安装, 在"User URL"处输入以下地址 ...

  3. 如何对抗、预防 SQL注入 攻击

    一.SQL注入简介 SQL注入是比较常见的网络攻击方式之一,它不是利用操作系统的BUG来实现攻击,而是针对程序员编程时的疏忽,通过SQL语句,实现无帐号登录,甚至篡改数据库. 二.SQL注入攻击的总体 ...

  4. ThinkPHP U函数生成URL伪静态

    ThinkPHP支持伪静态URL设置,可以通过设置URL_HTML_SUFFIX参数随意在URL的最后增加你想要的静态后缀,而不会影响当前操作的正常执行.例如,我们设置 'URL_HTML_SUFFI ...

  5. 第二百九十九节,python操作redis缓存-SortSet有序集合类型,可以理解为有序列表

    python操作redis缓存-SortSet有序集合类型,可以理解为有序列表 有序集合,在集合的基础上,为每元素排序:元素的排序需要根据另外一个值来进行比较,所以,对于有序集合,每一个元素有两个值, ...

  6. 在不指定特殊属性的情况下,哪几种HTML标签可以手动输入文本:()

    A. <TEXTAREA></TEXTAREA> B. <INPUT type=”text”/> C. <INPUT type=”hidden”/> D ...

  7. 平时收集的一些有关UED的团队和个人博客(转)

    UCDChina导航 前端团队 阿里巴巴 UED -- 我们设计的界面,并没有几十亿的流量,但每天来自上百个国家的百万商人在使用着. 阿里巴巴中国站UED -- 阿里巴巴中国站UED成立于1999年, ...

  8. 【Java NIO的深入研究5】字符集Charset

    Java 语言被定义为基于Unicode.一个字符实体由二个字节表示(如果是用UCS-2).但众多文件和数据流都是基于其它字符编码并以byte传输,操作文件内容就成了一个问题. 操作一个文件首先要对文 ...

  9. js使用正则表达式从url中获取参数值

    //从url中获取参数值 function getvl(name) { var reg = new RegExp("(^|\\?|&)"+ name +"=([^ ...

  10. MongoDB基础入门视频教程

    MongoDB基础入门视频教程http://www.icoolxue.com/album/show/98