图片文字混排的垂直居中、inline-block块元素和行内元素混排的垂直居中问题
图片、文字混排:
不管图片和文字的前后位置,都要给 图片 设置 vertical-algin,而不是谁在前面给谁设置。
此方法兼容IE7+ 和其它主流浏览器。IE7-没有测。
inline-block块元素、行内元素混排:
同图片和文字的混排,测试IE7+ 和其它主流浏览器。IE7-没有测。
两个行内元素:
设置vertical-algin并不会使元素在父元素中居中。
vertical-algin:
w3c:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
但是测试发现,混排是,只能设置给inline-block和img这种具有宽高特性的元素。
图片文字混排的垂直居中、inline-block块元素和行内元素混排的垂直居中问题的更多相关文章
- 块级元素和行内元素的区别 (block vs. inline)
块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了w ...
- block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
- CSS中的块级元素(block)与行内元素(inline)
css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...
- 【css】主要的块状元素(block element)和内联元素(inline element行内元素)
内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用 display可以强制转换行内元素和块状元素,还可以取消显示none 块元素(bloc ...
- display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...
- line-height系列(二)——对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现
>原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...
- CSS设置行内元素和块级元素的水平居中、垂直居中
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
- CSS 一些基础知识(优先级、行内元素的一些属性、font-size单位) 怎样不加载图片
CSS大小写不敏感 选择器优先级如下所示: 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选择 ...
- div和css:行内元素和块元素的水平和垂直居中
行内元素: 水平居中:text-align:center ul水平居中:加 display:table; margin:0 auto; 此元素会作为块级表格来显示(类似 <table>), ...
随机推荐
- zip文件内存中解压读取
// 构造zip输入流 ZipInputStream zip = new ZipInputStream(fis,Charset.forName("gbk")); byte[] tm ...
- Entity Framework应用:使用Code First模式管理视图
一.什么是视图 视图在RDBMS(关系型数据库管理系统)中扮演了一个重要的角色,它是将多个表的数据联结成一种看起来像是一张表的结构,但是没有提供持久化.因此,可以将视图看成是一个原生表数据顶层的一个抽 ...
- 使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序
简介: 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说,他们还不习惯去考虑应用程序基本的外观,因为这些以前都是由操作系统来处理的.了解 jQ ...
- Windows通用知识讲解一
Window应用程序的类型 --控制台程序Console DOS程序,本身没有窗口,通过Windows DOS窗口执行 --窗口程序 拥有自己的窗口,可以与用户交互 --库程序 存放代码.数据的程序, ...
- C++ c++与C语言的区别(struct类型的加强,函数-变量类型加强,bool类型)
//区别④:struct类型的加强(C++版本) #include<iostream> using namespace std; //C++中的struct是一个新类型的定义声明 //c+ ...
- 关于Unity中的定时器和委托
一.Invoke定时器 有3种定时器,这里我们讲Invoke 1.创建一个Canvas 2.对Canvas进行初始化 3.创建一个Image的UI节点作为Canvas的子节点,名字叫bg,拖进背景图片 ...
- selenium测试(Java)--截图(十九)
package com.test.screenshot; import java.io.File; import java.io.IOException; import org.apache.comm ...
- am335x hid-multitouch.c
am335x在使用电容屏,需要加载hid-multitouch.ko模块 由下面文件生成 kernel/drivers/hid/hid-multitouch.c 内核中编译模块 make module ...
- Spring中 classpath* 和 classpath 前缀的区别
// org.springframework.core.io.support.ResourcePatternResolver /** * Pseudo URL prefix for all match ...
- PHP wamp server问题
只能说各种不顺,天热人烦! 问题一.wampapache服务不能启动之VCRUNTIME140.DLL文件丢失. 这个是缺少VC运行库,查找并安装相应的文件即可. 问题二.wampapche服务不能启 ...