display:table总结(自己的一些个理解总结)
IE8是最后一款支持该属性的主流浏览器。在网页元素上应用该属性后,可以模仿出与表格相同的特性。
IE8以下是不能够识别这个属性的此元素会作为块级表格来显示(类似 ),表格前后带有换行符。该元素还可以使左右元素的高度相同,这两个左右元素的父元素使用这个属性,左右元素使用display:table-cell
http://www.liu...
分类:
Web程序 时间:
2014-12-05 19:28:00
阅读次数:
185
利用table-cell可以实现宽度自适应布局。table-cell有一些比较好用的属性,比如垂直居中,自适应高度宽度等,为元素设置table-cell布局之后,元素的margin失效,padding有效,而且一旦元素设置了float或者absolute,则table-cell也会失效。table-...
分类:
其他好文 时间:
2014-12-04 17:15:07
阅读次数:
399
如何让不定高和不定宽的图片水平垂直居中在某一个定高定宽的容器中呢,请听我细细到来。现在有很多浏览器(如chrome,部分ie,firefox,opera等)都支持display:table,display:table-cell,让图片水平垂直居中就很简单了,给外部容器加一个display:table...
分类:
其他好文 时间:
2014-12-03 16:58:35
阅读次数:
128
我们在写页面时经常会遇到让一个元素自动居中显示的需求,这个元素有可能是块级元素,有可能是行内元素,也可能是文字等等,而居中的需求有可能是水平居中,垂直居中或者两者同时居中。据我目前了解,居中有四种方式:1.利用table表格特性;2.使用table-cell属性以table方式渲染;3.margin...
分类:
其他好文 时间:
2014-12-03 12:01:36
阅读次数:
125
效果:html:一旦你娶了中国太太,就等于娶了她全家,不到半年,她爹、她妈、她二姐、她二姐的孩子就排着队全来了……我好端端的一个美国家庭,一眨眼工夫,就被中国人给占领了。css:#demo{display:table-cell;/*表格单元格*/vertical-align:middle;/*ver...
分类:
其他好文 时间:
2014-12-03 11:51:51
阅读次数:
218
问题
Grid某个单元格的样式怎么设置?
解决方案
使用attributes属性设置,如果有css中class属性,需要加双引号””.如
{
field: "name",
title: "Name",
attributes: {
"class": "table-cell",
style: "text-align: right; f...
分类:
其他好文 时间:
2014-11-27 16:25:33
阅读次数:
358
在不同的编码模式下,文字的行高计算是不一样的,所以请记住选择与页面相对的编码这个方法是利用display:table-cell在支持该属性的浏览器中,结合vertial-align:middle方法来实现图片垂直居中;在不支持display:table-cell的浏览器(IE)中利用文字结合行高的方法来实现垂直居中;display:table-cell这个属性会导致一些属性失效,比如margin,...
分类:
其他好文 时间:
2014-11-17 09:14:36
阅读次数:
140
前言:垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式。主要方式:line-height绝对定位表格 display:table-cell主要需求:固定宽高不固定宽高主要兼容:ie8+ 主流浏览器ie6,7行高1. 利用行高与高度相同,实现单行文本居中缺点:只能...
分类:
Web程序 时间:
2014-10-04 13:59:36
阅读次数:
287
1:单行文字垂直居中: 如果一个容器中只有一行文字的话,定义height(高度)和 line-height(行高)相等即可。 如:aa2:多行文本固定高度垂直居中:核心:display:table 和display:table-cell ;vertical-align:middle;兼容:ie7+....
分类:
Web程序 时间:
2014-09-12 21:55:34
阅读次数:
250