图片文字混排的垂直居中、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>), ...
随机推荐
- [LintCode]计算两个数的交集(一)
问题分析: 既然返回值没有重复,我们不妨将结果放进set中,然后对两个set进行比较. 问题求解: public class Solution { /** * @param nums1 an inte ...
- 訪问站点时仅仅是显示主页(index.jsp),没有请求连接数据库读取数据。
两部曲: 1:在你的web.xml中的Struts2的核心过滤器的映射中添加 <filter-mapping> <dispatcher>REQUEST</disp ...
- Java 获取webapp,Root,classpath,项目等路径工具类
public class UtilPath { public static void main(String[] args) { String systemName = System.getPrope ...
- R工具包
直到12月初在微软技术大会,看到我软的工程师演示R的使用,我就震惊了,然后最近在网上到处了解和爬一些R的资料,看着看着就入迷了,这就是个大宝库了,以前怎么没发现,看来还是太狭隘了.直到前几天我看到这个 ...
- Windoows窗口程序一
编写窗口程序的步骤: .定义WinMain入口函数 .定义窗口处理函数(处理消息)WindowProc .注册窗口类RegisterClass .创建窗口(在内存中创建窗口)CreateWindow ...
- imx6 qt 24bpp RGB
imx6运行qt,在24bit的LVDS接口屏上显示时,显示效果与实际的不同.蓝色变成了黄色. 本来应该显示成蓝色: 实际上去显示成了黄色: 而其他绿色的图标并没有改变,只是蓝色和黄色互换了. 猜想应 ...
- Spring 4 官方文档学习(十一)Web MVC 框架之Flash Attributes
接上一篇中的重定向. http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html#mvc-fl ...
- PS流的格式和解析总结
对于PS流,最近因为工作需要,所以MPEG2中的PS流格式和解包过程进行了学习. 首先我们需要知道PS包流格式是怎么样的: (来自http://blog.csdn.net/chen495810242/ ...
- hdu5087——Revenge of LIS II
Revenge of LIS II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...