Css 利用table-cell实现居中的方法

最新推荐文章于 2024-08-18 03:01:33 发布
最新推荐文章于 2024-08-18 03:01:33 发布
阅读量961 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010227447/article/details/49492135
本文介绍了一种使用CSS `display: table` 和 `display: table-cell` 属性实现元素垂直居中的方法，该方法适用于单行或多行文本，能够很好地保持居中效果。

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

  1. 利用的知识点：通过display转化成为表格的形式，再采用垂直居中的方法得到需要的结果

    display:table    此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。    

    display:table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>

  2. 原代码如图所示：

  3. 结果如图所示：

  4. 需要的注意的是， 这个布局的最大的好处是不管是单行还是多行都可以比较完美的实现居中的效果。

  5. 结论：希望css可以出一个高级一点的属性吧，我觉得这个方法还是回到之前的表格布局时代，仅仅提供参考

u010227447
关注
table-cell设置垂直居中
moonla3的博客
10-15 1900
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
table-cell设置宽高、居中
weixin_30307921的博客
09-04 2619
table-cell默认宽高由内容决定 <style type="text/css" rel="stylesheet"> .content { color: white; } .cell { background-color: blue; ...
CSS中使用table-cell法来达到居中效果
09-25
主要介绍了CSS中使用table-cell法来达到居中效果,文中的示例给出了与之配合的HTML代码,需要的朋友可以参考下
table & table-cell 居中
qq_44917015的博客
04-28 290
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
tabcell居中
tel15277169530的博客
11-06 653
http://www.cnblogs.com/2050/p/3392803.html 不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了 .playtabcell {     display:table-cell;         text-align:center; /* 使inline 子元素
使用CSS的table-cell属性实现左图右文的排版方法详解
01-19
我们使用table-cell也可以简单的实现，利用table-cell来制作横向排列的好处我觉得有三点（呵呵呵，有些牵强） 1.float以及 clear:both都可以省略了；2.纵向居中也可以了；3.就算使用border和padding也不会顶出边框了...
关于CSS中的display:table-cell使用技巧的几种应用
01-19
例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的，虽说IE6/7不支持此属性，但是幸运的是，IE6/7一些乱糟糟的属性与渲染，我们可以其他方法实现同样或是类似的效果。...
实现div垂直居中的display:table-cell方法示例介绍
09-25
总结一下，通过display:table-cell实现div垂直居中是一种兼容多浏览器的实用方法，但需要考虑浏览器的兼容性，并可能需要结合其他CSS属性来达到更好的效果。随着现代浏览器对CSS3标准的广泛支持，使用Flexbox布局来...
CSS笔记——表格元素table单元格合并和妙用（利用table-cell实现块级、多行文本元素水平垂直居中）、表单元素form
bqiuer的博客
09-25 6456
HTML中，表格由 table 元素来定义.还有一些用于表格的其他标签，如 caption、thead、tbody、tfoot、th 等。是用于收集用户信息的一组元素。formnovalidate: 定义提交表单数据时是否要忽略表单元素的验证。定义表单元素的值，例如文本框中的默认文本、默认选中的单选框或复选框等。表单元素只读，用户无法修改其值，通常用于展示数据或只读状态的表单元素。禁用表单元素，使其无法接收用户输入，通常用于表单元素不可用的情况。：表单的容器(表单域），用于将表单元素组织在一起。
Java Cell 表格居中
最新发布
weixin_37069256的博客
08-18 334
我整理的一些关于【Java】的项目学习资料（附讲解～～）和大家一起分享、学习一下：https://d.51cto.com/bLN8S1Java中实现Excel表格单元格居中的方法 目录 介绍 整体流程 每一步的实现 设置工作簿 创建工作表 创建单元格样式 应用于单元格 示例代码 类图 甘特图 结论 1. 介绍 ...
el-table中的文本居中
DZQ1223的博客
05-18 7435
【代码】el-table中的文本居中。
css中元素水平居中的方式
努力的鋜
12-02 335
css元素水平垂直居中方式，以及css中的一些样式居中问题的解决
vue-cli项目中使用vux cell不居中的问题
weixin_44704285的博客
07-30 560
直接上代码： <template> <div> <h1>我的</h1> <cell slot="title" value="￥1024"></cell> <cell-form-preview :list="list"></cell-form-preview> </div> </template> <script> import {Group,
table-cell布局
热门推荐
izwell的博客
09-04 3万+
display:table-cell属性简介 display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding...
css - display:table-cell的使用
火星男孩的分享空间
02-08 1万+
参考： 布局神器(一)display:table-cell display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。 display: table与标签table的对比 示例： 参考：css文档：display css中display设置为table、table-row、table-cell后的作用及其注意点 &amp;amp;lt;!DOCTYPE htm...
display:table和display:table-cell实现单行，多行文本垂直居中
u011200562的博客
10-17 765
今天工作中遇到了一个问题，一个栏目的信息标题有长有短，短的一行，长的两行，但都要求垂直居中，像这样： 一般的思路就是高度等于行高，但是这个仅适用于单行文本，flex布局也只是对元素可以设置垂直居中，不作用于文本。都不适用于像这个例子的，同一位置的不同场景。经过百度的指点，终于找到了比较完美的解决方法，那就是：结合使用display:table和display:table-cell，遂速记之。 <div> <p> hello w...
css中的display属性值：table，table-row，table-cell
liaowenxiong的博客
12-09 6087
table：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 table-row：此元素会作为一个表格行显示（类似 <tr>）。 table-cell：此元素会作为一个表格单元格显示（类似 <td> 和 <th>） 上述这些 display 属性值，可以让元素在显示时具有表格、表格行、单元格相关的属性，例如，div 元素，你正常显示几个 div 元素是这样的： 示例代码： <div style="border: 1px soli
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值