CSS display: table-cell 用于水平垂直居中
CSS display: table-cell 用于水平垂直居中
在 CSS 设置居中时候,水平和垂直居中的设置略有不同,通常我们使用 text-align:center 对图片、文字等行内元素(inline / inline-block)进行水平居中,并使用 line-height 对单行文字设置垂直居中(仅适用于单行文字)。但是,如果使用表格,则可以通过 td(单元格元素)的 align="center" 及 valign="middle" 属性设置单元格内容的水平和垂直居中。 而对于那些不是表格的元素,可以通过 display: table-cell 将其模拟成一个表格单元格 td,这样就可以通过 CSS 的vertical-align: middle; /* 垂直居中*/
和 text-align: center; /* 水平居中*/
属性进行设置。
display 值及其作用
display 值 | 模拟 | 对应标签 |
---|---|---|
table | 块元素级的表格 |
<table>
|
inline-table | 内联元素级的表格 |
<table>
|
table-caption | 表格标题 |
<caption>
|
table-cell | 表格单元格 |
<td>
|
table-row | 表格行 |
<tr>
|
table-row-group | 表格行组 |
<tbody>
|
table-column | 表格列 |
<col>
|
table-column-group | 表格列组 |
<colgroup>
|
table-header-group | 表格标题组 |
<thead>
|
table-footer-group | 表格脚注组 |
<tfoot>
|
display: table-cell 实现水平垂直居中
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.container{width: 100px;height:50px;border: 1px solid black;display: table-cell; /* 模拟为td单元格,同时形成了 BFC *//*display: table-caption 如果设置为此项 则不能使用水平和垂直居中*/ vertical-align: middle; /* 垂直居中*/text-align: center; /* 水平居中*/margin:50px; /* table-cell 对 margin 不感知,此处设置无效*/}</style></head><body><div class="container">a</div><div class="container">b</div><div class="container">c</div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.con{background: red;display: table; /* 将父元素div模拟为块级表格 table*/margin: 50px; /* 设置父元素 table 的margin*/}.container{width: 200px;height:50px;border: 1px solid black;display: table-cell; vertical-align: middle; text-align: center; /*margin: 50px;*/ 去掉设置无效的 margin}</style></head><body><div class="con"><div class="container">a</div><div class="container">b</div><div class="container">c</div></div></body>
</html>
模拟之后,其属性的使用,就可以将其视作一个标签进行使用。
reference
display:table-cell实现水平垂直居中
css Table布局-display:table
CSS布局奇淫技巧之--各种居中
转载于:https://www.cnblogs.com/HevateArvin/p/10270403.html
CSS display: table-cell 用于水平垂直居中相关推荐
- [CSS] CSS display:flex实现内容水平垂直居中展示
display:flex实现内容水平垂直居中展示 需要增加下面两点就能实现 首先父级元素必须有高度,没有高度就无法垂直居中,如果想全屏垂直居中,可以设置高度为100vh 比如body设置为这样 bod ...
- CSS display:table属性用法解析
本节和大家重点讨论一下CSS display:table的使用,当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值,CSS表格能够解决所有那些我们在使用绝对定位和浮动 ...
- html表格图片垂直居中 css,利用Display: table;实现img图片垂直居中
html代码: CSS代码: .tablebox{width: 300px;height: 250px;bac公斤round: #fff;display: table} #imgbox{display ...
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中 优点:父元素( ...
- CSS文字或元素的水平垂直居中多种方式(简单明了)
前言:水平居中,我们可以很容易想到使用text-align实现文字水平居中,使用margin:0px auto;可以实现元素水平居中:所以重点将是怎么实现文字和元素的垂直居中?? --- 本文将通过举 ...
- HTML+CSS之设置元素的水平垂直居中
本文主要介绍如何利用HTML和CSS实现元素的水平垂直居中. 1.弹性布局(不换行) justify-content:center:水平居中 align-items:center:垂直居中 .fath ...
- CSS如何让一个div水平垂直居中
大家好,我是新来的程序猿小清,在我们前端开发中,经常会让元素水平垂直居中的,现在我来给大家带来以下几种水平垂直居中的方法,如有不如,请谅解 <body><div class = &q ...
- CSS中实现div元素水平垂直居中
常用7种实现水平垂直居中方法: 1.行内元素水平垂直居中 2.绝对定位 + margin 3.绝对定位+margin:auto 4.绝对定位 + translate 5.flex 布局 6.flex+ ...
- 每日一个css小技巧 6/10 水平垂直居中
行内元素水平垂直居中 1 常规设置 一句话总结: text-align设置水平居中,line-height = height 设置垂直居中 2 父盒子模拟为表格 块级元素水平垂直居中 1 positi ...
最新文章
- JS-DOM-元素节点
- Spring AOP编程-aspectJ通知类型-6大通知
- Exchange 2007 安裝(-)
- php ziparchive自带吗,PHP自带的ZipArchive压缩文件并下载打包好的文件(重要)
- DateFormat(炸窝)
- 度量时间差和jiffies计数器
- mysql面试题2020_2020年MySQL数据库面试题
- 计算机美化照片教案,美化你的桌面 教案
- 因未交赎金,世界航天巨头机密文档遭勒索软件公开
- flutter 自定义键盘_Flutter 引擎架构
- Silverlight访问WCF双工通信的官方例子
- 用户已关闭隐式函数计算_针对隐式反馈和LightFM模型的杂谈
- SpringMVC框架学习上篇
- W25Q64 Flash芯片原理与应用方案(含W25Q64中文数据手册)
- wps流程图直线上怎么填字_流程图走起!使用WPS文字快速制作美观的流程图
- 针对源代码保密源代码安全管理产品选型建议
- 七、基础教程-坐标轴(Axis)
- 从校训、企业文化到团队文化
- 有趣好玩的黑科技网站分享
- js 对日期的计算,加减天数
热门文章
- Springboot文件上传 百度ocr文字识别提取
- 力士乐伺服电机编码器调零_力士乐伺服电机故障与维修排除备份构成
- html background缩放,background-size使用详解
- Android控件扫光动画,完美起航-AndroidTV控件获得焦点的扫光效果
- 多线程处理大文件_Java内存映射,上G大文件轻松处理
- 【面试必备】静态路由与配置相关知识点详解
- office文件已损坏 该服务器,Office文件可能已损坏处理方法
- cpu飙升 死循环_java排查一个线上死循环cpu暴涨的过程分析
- qt5 linux 控制台 乱码,qt5.12 解决显示中文乱码问题
- 4g通信模块怎么连接sim卡_你好eSIM,再见SIM卡