display:table-cell属性介绍与使用
display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜!
当两个或者两个以上标签一起使用显示在同一行时,以前常用的是float、position进行布局,在高版本的浏览器可以使用flex、grid进行布局。无意中发现使用display:table-cell也是一个很好用的自适应布局,本文就display:table-cell做学习总结。
display:table-cell指让标签元素以表格单元格的形式呈现,使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性,IE6/7不支持(可用其他方法实现类似效果)。同样,display:table-cell属性也会被float,position:absolute等属性破坏效果,应避免同时使用。
display:table-cell可以代替浮动布局,但是其不是最好的方法。其他方法有待进一步学习!
这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到,单行文字垂直居中line-height等于height;块级元素垂直居中,position定位或者flex布局。但这里我介绍display:table和table-cell是如何让多行文字垂直居中的。虽然感觉用的不多,但是在某些时候还是挺管用的,如下:
效果如下:
设置了display:table-cell的元素:
对宽度高度敏感对margin值无反应响应padding属性内容溢出时会自动撑开父元素效果如下:
!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titletable/titlestyle.content { display: tablecell; padding: 10px; border: 2px solid #999;} .content div { display: inlineblock; verticalalign: middle;}/style/headbodydiv class=contentdiv style=padding: 50px 40px;background: #cccccc;color: #fff;/divdiv style=padding: 60px 40px;background: #639146;color: #fff;/divdiv style=padding: 70px 40px;background: #2B82EE;color: #fff;/divdiv style=padding: 80px 40px;background: #F57900;color: #fff;/divdiv style=padding: 90px 40px;background: #BC1D49;color: #fff;/div/div/body/html效果如下:
!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titletable/titlestyle.content { display: table; padding: 10px; border: 2px solid #999; width:20%;}.leftbox {float: left; marginright: 10px;}.rightbox { display: tablecell; padding: 10px; width: 3000px; /*右侧自适应*/ verticalalign: top; border: 1px solid #ccc;}/style/headbodydiv class=contentdiv class=left-boximg src= width=70/divdiv class=right-box/div/div/body/html效果如下:
左边头像部分使用了float左浮动属性,右侧使用 display: table-cell则实现了两列自适应布局。
注:我们为一个元素设置了display:table-cell属性,而不将其父元素设置为display:table-row属性,浏览器会默认创建一个表格行。
!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titletable/titlestyle.content { padding: 10px; margin: 10px auto; display: table; width: 20%; border: 2px solid #999;} .content ul { display: tablerow;} .content ul li { display: tablecell; height: 100px; lineheight: 100px; textalign: center; border: 1px solid #ccc;}/style/headbodydiv class=contentulli1/lili2/lili3/lili4/lili5/li/ul/div/body/html效果如下:
这类布局常用浮动布局(给每个li加上float:left属性)实现,但这样做有明显不足:
需要清除浮动不支持不定高列表的浮动display:table-cell属性介绍与使用 https://cdnanqi.cn/wangluoyingxiao/17045.html
- SEO网站优化全网推广公司
- 网站关键词排名不稳定怎么办?-攀枝花seo优化快排
- 网站文章持续更新,但是网站排名依然上不去的原因-成都seo优化-成都网站优化
- 网站没有排名的原因有SEO技术和常规SEO问题-眉山SEO优化
- SEO搜索引擎优化推广工作
- 如何从容面对网站SEO排名上升或者下降?_宜宾seo优化
- 品牌如何要做好搜索引擎优化?先了解搜索引擎优化的运作过程-成都SEO优化
- 持之以恒的seo优化自然流量胜过段时间内被动营销流量-成都seo网站关键词优化
- 想要微调网站稳定排名,你做到这几点了吗-成都seo优化-成都网站优化
- 谷歌发布谷歌新闻发布者(Google News Publisher Center)工具 | 邛崃网络公司
400电话办理