css中display:table和display:table-cell的合用的妙处

本篇文章给大家带来的内容是介绍cssdisplay:tabledisplay:table-cell的合用的妙处 。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜!

这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到,单行文字垂直居中line-height等于height;块级元素垂直居中,position定位或者flex布局。但这里我介绍display:table和table-cell是如何让多行文字垂直居中的。虽然感觉用的不多,但是在某些时候还是挺管用的,如下

1.jpg

直接上代码:

html:

立即学习“前端免费学习笔记(深入)”;

    

会议认为,党的十八大以来,我国经济发展取得历史性成就、 发生历史性变革,为其他领域改革发展提供了重要物质条件。经济实力 再上新台阶,经济年均增长7.1%,成为世界经济增长的主要动力源和稳定器。

css:

       .parent {           display: table;           width: 300px;           height: 300px;           text-align: center;       }       .son  {           display: table-cell;           height: 200px;           background-color: yellow;           vertical-align: middle;       }

看完代码是不是瞬间明白了,这里我们只需要将容器设为display:table然他成为一个块级表格元素,子元素display:table-cell使子元素成为表格单元格,然后就像在表格里一样,给子元素加个vertical-align: middle就行了,多行文字垂直居中啦。是不是很直接很简洁~

以上就是css中display:table和display:table-cell的合用的妙处的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1612759.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 03:11:24
下一篇 2025年12月24日 03:11:58

相关推荐

  • 实例示范CSS中伪类选择器hover的使用方法

    在页面布局时,经常会用到css中的hover选择器,它可以设置鼠标经过时的特殊样式,作为一个前端开发人员,你知道css伪类选择器hover怎么使用吗?这篇文章就和大家讲讲css中hover的使用方法及实例示范,有一定的参考价值,感兴趣的朋友可以看看。 伪类选择器hover可以在鼠标移到链接上时设置一…

    2025年12月24日 好文分享
    000
  • css怎么设置字体加粗样式

    css设置字体加粗样式的方法:首先创建一个HTML示例文件;然后在body中定义一些文字内容;最后通过“font-weight:bold;”或“font-weight:bolder;”属性设置字体加粗样式即可。 本文操作环境:Windows7系统、Dell G3电脑、HTML5&&C…

    2025年12月24日
    000
  • 如何使用纯CSS实现打开内容弹窗的交互动画(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现打开内容弹窗的交互动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 立即学习“…

    2025年12月24日
    000
  • 如何实现图片在页面中宽高一直保持16:9的比例

    本篇文章给大家带来的内容是关于如何实现图片在页面中宽高一直保持16:9的比例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 目标:遇到一个需求,让图片在页面中,不管宽度如何变化。宽高保持16:9的比例。 实现: 方法一:这也是比较经典的一个方法,利用padding-bottom来实…

    好文分享 2025年12月24日
    000
  • css+html如何实现物流进度样式(代码示例)

    本篇文章给大家带来的内容是介绍css+html如何实现物流进度样式(代码示例),有需要的朋友可以参考一下,希望对你们有所帮助。 效果: css样式: ul li { list-style: none; } .package-status { padding: 18px 0 0 0 } .packag…

    2025年12月24日
    000
  • 分享HTML和CSS实现的炫酷登录页面代码

    大家在浏览网站时有没有发现,几乎每个网站都会要求你注册或登录,那作为一个前端开发人员,你知道html登录页面怎么制作吗?这篇文章就给大家分享一个由html 和css实现的炫酷的登录页面代码,有一定的实用价值,感兴趣的朋友可以参考一下。 制作这个炫酷的登录页面需要用到很多CSS中的属性,比如box-s…

    2025年12月24日
    000
  • 实例讲解CSS中相对定位和绝对定位的用法和区别(图文)

    css中的position属性可以设置元素的定位类型,比如fixed,relative,absolute等等,但是很多人搞不懂relative相对定位和absolute绝对定位的区别,这篇文章就和大家讲讲什么是绝对定位,什么是相对定位,以及相对定位和绝对定位的区别,有一定的参考价值,感兴趣的朋友可以…

    2025年12月24日
    000
  • css怎么重置样式?网页中8种css默认样式重置代码汇总

    本篇文章给大家带来的内容是介绍css怎么重置样式,总结了一些常用css默认样式重置的代码分享给大家。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 在网页设计开发时,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表。那么,“抹掉”这些css默认样式表成…

    好文分享 2025年12月24日
    000
  • 如何利用css实现圆形效果?(代码实例)

    本篇文章给大家带来的内容是关于如何利用css实现圆形效果?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 之前我们知道,CSS3动画效果由3大部分组成:变形、过渡和动画。前2章,我们已经对变形效果和过渡效果进行详细地讲解。这一章我们来讲解CSS3中“真正”的动画效果。 …

    2025年12月24日
    000
  • flex-shrink如何计算?flex-shrink的计算方法介绍

    本篇文章给大家带来的内容是关于flex-shrink如何计算?flex-shrink的计算方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 先回顾一下flex-grow 假设有一个div内包含三个子div1, div2, div3,宽度分别200px.对于flex-grow对…

    2025年12月24日
    000
  • CSS什么是继承?CSS如何使用?

    本篇文章给大家带来的内容是介绍css什么是继承?css如何使用?有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助。 CSS的继承 css的继承指的是当标签具有嵌套关系时,内部标签自动拥有外部标签的不冲突的样式的性质。 在Css中有些属性不允许继承,例如,border属性没有继承性。多边框…

    好文分享 2025年12月24日
    000
  • CSS选择符是什么?CSS选择符有哪些?

    本篇文章给大家带来的内容是介绍css选择符是什么?css选择符有哪些?有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助。 W3School离线手册(2017.03.11版)下载:https://pan.baidu.com/s/1c6cUPE7jC45mmwMfM6598A 选择符指的是要…

    好文分享 2025年12月24日
    000
  • 如何使用CSS和Vanilla.js实现展示苹果设备的交互动画(附源码)

    本篇文章给大家带来的内容是关于如何用css和vanilla.js实现展示苹果设备的交互动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代…

    2025年12月24日
    000
  • 如何使用纯CSS实现万圣节的toggle控件(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现万圣节的toggle控件(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码地址 https://github.com/shanyuhai123/learnCSS/tree/master/0159-hallow…

    2025年12月24日
    000
  • CSS 3D实现旋转球是如何实现的?(代码案例)

    本篇文章给大家带来的内容是关于css 3d实现旋转球是如何实现的?(代码案例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 废话不多说了,直接给大家贴代码了,具体代码如下所示: zimv-css 3d ballbody{padding: 100px 0 0 150px;}.wra…

    2025年12月24日
    000
  • 图文详解CSS中rgba,rgb和opacity之间的区别

    css中设置背景颜色的方式有很多,比如background-color,rgb,rgba等等,那你知道rgba,rgb和opacity之间的区别吗?这篇文章就给大家讲讲rgba,rgb和opacity之间的区别,有一定的参考价值,感兴趣的朋友可以参考一下。 rgb和rgba的区别: rgb就是指红色…

    2025年12月24日
    000
  • CSS实现富有创意的页面加载(loading)动画效果

    小伙伴们在浏览网站时有没有遇到页面“loading中,请稍后”的情况,作为前端工程师,你会用css制作页面加载(loading)动画效果吗?这篇文章给大家分享一个富有创意的页面加载(loading)动画代码,有一定的参考价值,感兴趣的朋友可以看看。 制作一个富有创意的页面加载(loading)动画需…

    2025年12月24日
    000
  • 什么是BFC?BFC的深入解析

    本篇文章给大家带来的内容是关于什么是bfc?bfc的深入解析 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、什么是BFC Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位…

    2025年12月24日 好文分享
    000
  • css3中all属性有什么用?css3中all属性的用法介绍

    本篇文章给大家带来的内容是关于css3中all属性有什么用?css3中all属性的用法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、兼容性 如下图: 兼容性还行, 除了IE不支持,其他浏览器基本上都绿油油,目前自娱自乐,内网项目什么的都是可以用用的。 二、all是干嘛用的…

    2025年12月24日 好文分享
    000
  • css中flex弹性布局的步骤讲解(附代码)

    本篇文章给大家带来的内容是关于css中flex弹性布局的步骤讲解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 html: *{ margin: 0; padding: 0; box-sizing: border-box; } .wrap{ width: 300px; h…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信