display:table-cell 与 vertical-align:middle结合使用，使容器内容垂直居中

最新推荐文章于 2024-07-12 10:21:37 发布
最新推荐文章于 2024-07-12 10:21:37 发布
阅读量2.8k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tangcc110/article/details/79921655
本文介绍了如何利用`display: table-cell`和`vertical-align: middle`结合，来实现元素内容的垂直居中。讨论了`vertical-align`属性在`table-cell`元素上的应用，以及在父元素使用`float`属性时可能遇到的问题，并提供了三种图片垂直居中的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

以下方法如果不起作用，因为img的父级用了float属性。

performance：

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

solve方案1：

 

performance:

brief summary:

1.  vertical-align 只对table-cell（可以设置宽高 的行内元素）的元素有效，及类似table-cell的元素，如：input  button radio checkbox  

2. display:inline-block 约等于table-cell

////////////////////////////////////////////////////////////////////////////

最低0.47元/天 解锁文章

200万优质内容无限畅学
div中的内容垂直居中 display: table-cell； vertical-align: middle；
u010782109的博客
06-30 291
div中的内容垂直居中 display: table-cell;vertical-align: middle;
table-cell垂直居中外边距失效
nidayeya的博客
05-28 1563
css display:table-cell; vertical-align:middle;垂直居中 外边距失效 第一次写刚接触前端的小白 做练习时用到了此垂直居中方式，当给元素加外边距时出现问题： html: <body> <div class="test"> <p>此处内容为医生团队简述。北京科尔口腔门诊部共有专业牙科医生 0000名.........
display:table和display:table-cell的妙用
weixin_30512089的博客
12-21 557
　　display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！ 这里抛出这样一个问题，如下，让块里的多行文字垂直居中？一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。但这里我介绍display：table和table-cell是如何让多行文字垂直居...
使用display:table-cell 和 vertical-align:middle 不定宽高图片居中于容器
cysear的专栏
01-11 6264
.phone a{ display: table-cell;text-align: center; vertical-align: middle; width: 50px; height: 50px; border: 2px solid #d3d3d3; border-radius: 50%; } .phone a img{ vertical-align: middle;} 注
实现盒子居中的另外一种方法：display:table-cell配合vertical-align:middle
sinat_41747081的博客
01-21 389
实现一个盒子中的内容居中有很多方式，这里介绍一个我不经常用的方法，即display:table-cell配合vertical-align:middle的方式。 .box { width: 150px; height: 150px; border: 1px solid #ededed; display: table-cell; vertical-align: ...
php中表格怎么垂直居中,如何利用display:table-cell实现垂直居中？
weixin_33603067的博客
03-21 987
在网页布局中，我们经常会需要让图片或者文字垂直居中，实现垂直居中的方法也有很多种，今天就给大家介绍一下利用display:table-cell属性实现垂直居中的方法，下面我们看看具体内容。首先我们来简单认识一下display:table-cell属性display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签，使用display:table-cell让大小不固定元素垂...
实现div垂直居中的display:table-cell方法示例介绍
09-25
然后，内部容器div#subwrap的display属性设置为table-cell，并配合vertical-align:middle属性来实现垂直居中。需要注意的是，由于IE7和IE6不支持display:table-cell，我们需要采用其他方法，比如通过设置line-height...
关于CSS中的display:table-cell使用技巧的几种应用
09-25
- 一个常见的应用场景是在图片和文字的垂直居中布局中，配合`vertical-align: middle`和适当的父容器设置，可以轻松达成效果。 - 提供的示例代码显示了如何使用`display: table-cell` 和文本大小来使图片垂直居中...
css里面的display: table-cell和vertical-align
weixin_50789445的博客
05-24 243
使用display: table-cel可以使两个元素并排,然后使用vertical-align的top或者bottom来决定对齐的方式
使层垂直居中的display:table-cell方法，多浏览器兼容
sunny327的专栏
07-24 7951
ie7和ie6都不能识别 display: table-cell;（但是支持display: block等css1的属性！） ie8以及以后版本可以识别！ ie7和ie6能识别vertical-align:middle; 如果盒模型中间只有几段文字的话，设置line-height就可以实现居中显示了！ 如果要实现盒模型中的div居中，可以参考以下代码：             d
display:table和display:table-cell实现单行，多行文本垂直居中
weixin_44691513的博客
03-12 510
一个栏目的信息标题有长有短，短的一行，长的两行，但都要求垂直居中，像这样： 一般的思路就是高度等于行高，但是这个仅适用于单行文本，flex布局也只是对元素可以设置垂直居中，不作用于文本。都不适用于像这个例子的，同一位置的不同场景。经过百度的指点，终于找到了比较完美的解决方法，那就是：结合使用display:table和display:table-cell，遂速记之 <div> <p> hello world <br /> hello world <br
[CSS] css中display: table-cell 实现垂直居中
程序员老狼专注开发aigc或客服系统应用
07-01 695
display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果 设置了display:cell;后，vertical-align:middle使文字内容垂直居中 例如以下用法 height: 100px; display: table-cell; vertical-a...
display:table-cell
leadn的博客
11-25 610
display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，应避免同时使用。 设置了display：table-cell的元素： 对宽度高度敏感 对margin值无
CSS基础知识（五）：水平居中和垂直居中
前端
10-28 3243
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
对display:table-cell的学习
AmberWu
05-12 4879
我已经沉浸在周末前一天的愉快氛围里无法自拔。 1、简介 今天来学习一下display的一个值，table-cell W3C上面关于这个属性值的解释 是它会作为一个表格单元格显示（类似td和th） ie兼容性：支持到ie8+ 注意：table-cell 在使用的时候容易被其他一些css属性所影响，对元素的高度宽度非常敏感，margin值对其不起作用，但是可以设置其padding值。
LVGL控件：表格 lv_table
最新发布
友善啊，朋友的博客
07-12 2558
表格由行、列和单元格构建而成。单元格只能包含文本，即任何数值数据在显示前都必须转换为文本格式。单元格不作为独立的对象存在，而是按需绘制，这就保持了较低的内存占用。
嵌入式GUI LVGL『Table表格控件』介绍
朝气蓬勃
08-28 7336
一. LVGL GUI开关控件的概念 像往常一样，表是从包含文本的行，列和单元格构建的。 由于仅存储文本，因此 Table 对象的权重非常轻。没有为单元创建任何实际对象，但它们是动态绘制的。 二. LVGL GUI开关小部件和样式 该表的主要部分称为 LV_TABLE_PART_BG 。它是一个类似于背景的矩形，并使用所有典型的背景样式属性。 对于单元，有 4 个虚拟部分。每个单元格都具有类型（1、2、3 或 4），该类型指示要在其上应用哪个部分的样式。单元格部分为： LV_TABLE_PART_C
CSS display: table-cell 用于水平垂直居中
weixin_30500289的博客
01-15 310
CSS display: table-cell 用于水平垂直居中 在 CSS 设置居中时候，水平和垂直居中的设置略有不同，通常我们使用 text-align:center 对图片、文字等行内元素（inline / inline-block）进行水平居中，并使用 line-height 对单行文字设置垂直居中（仅适用于单行文字）。但是，如果使用表格，则可以通过 td（单元格元素）的 ali...
display:table-cell布局
Aliguagua的博客
12-04 9959
display:table-cell布局display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，所以尽量避免同时使用。CSS display属性的表格布局相关属性的
display: table-cell;怎样设置垂直居中
05-27
要将元素垂直居中，您可以使用以下 CSS 属性组合： ``` display: table-cell; vertical-align: middle; ``` 请注意，这将仅适用于具有 `display: table` 或 `display: table-cell` 属性的元素。如果您想将其他元素垂直居中，可以考虑使用 Flexbox 或 Grid 布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值