图片文字混排的垂直居中、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>), ...
随机推荐
- Web API(五):Web API跨域问题
一.什么是跨域问题 跨域:指的是浏览器不能执行其他网站的脚本.是由浏览器的同源策略造成的,是浏览器施加的安全限制.(服务端可以正常接收浏览器发生的请求,也可以正常返回,但是由于浏览器的安全策略,浏览器 ...
- Jquery仿IGoogle实现可拖动窗口(源码)
google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天仿照iGoogle做了一个简单的小demo. 这个的demo ...
- apt-get强制使用Ipv4
sudo apt-get -o Acquire::ForceIPv4=true update 永久解决办法: 创建文件 /etc/apt/apt.conf.d/99force-ipv4 加入代码: A ...
- Spring 4 官方文档学习(十)数据访问之ORM
http://docs.spring.io/spring/docs/current/spring-framework-reference/html/orm.html 占位用,暂略.
- 第二百八十三节,MySQL数据库-MySQL存储过程
MySQL数据库-MySQL存储过程 MySQL存储过程,也就是有点像MySQL函数,但是他与MySQL函数是有区别的,后面会讲到函数,所以注意区分 注意:函数与存储过程的区别 存储过程是:CREAT ...
- erlang工具:Sublime Text的插件
SublimErl :https://github.com/ostinelli/SublimErl (推荐,操作较简单) ...
- u3d发布成全屏的方式
using UnityEngine; using System.Collections; public class example : MonoBehaviour { public voi ...
- c++ json cpp
一 编译链接 1 在相应官网下载jsoncpp 2 解压得到jsoncpp-src-0.5.0文件 3 打开jsoncpp-src-0.5.0 -> makefiles -> vs71 - ...
- 数据库ADO方式读取图片
void Caccess_test_1Dlg::OnBnClickedButton3()//将偏振图像存入数据库 { // TODO: 在此添加控件通知处理程序代码 if (!PathFileExis ...
- C#------?和??运算符的作用
转载: http://www.cnblogs.com/zfanlong1314/archive/2012/02/26/2390456.html 1.?的作用 在处理数据库和其他包含不可赋值的元素的数据 ...