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 ...
最新文章
- 先理解Mask R-CNN的工作原理,然后构建颜色填充器应用
- tomcat的server.xml详解
- 简明 Python 编程规范v2
- datetime 比较_Python 字典中key命中取值的两种方法性能比较!
- 5-10多分支网络结构
- vue列表排序实现中的this问题
- php file_get_contents 效率,php 浅析file_get_contents、curl 的效率和稳定性
- B站就机房服务器故障道歉;罗永浩否认将启动自动驾驶项目;​亚马逊收购 Facebook 卫星互联网团队|极客头条...
- Dx unsupported class file version 52.0 Conversion to Dalvik format failed with error 1
- C语言程序设计谭浩强第五版课后答案
- RS-485通信协议(ModBus版)
- 如何将数据库文件进行压缩
- SpringBoot之下载Excel
- CentOS停更;阿里发布全新操作系统(Anolis OS),用后直呼:牛X
- c语言打开文件报错 13,求帮忙看一段打开文件的代码~~真心无力了
- Python程序员必备的四款开发工具
- 万万没想到,最简单的视频编辑软件竟然是知乎?!
- html excel 在线编辑,利用js实现在线编辑excel表格代码
- Android如何解决文字转语音播报的问题
- 求微信小程序开发交流群
热门文章
- 排序算法 | 直接插入排序算法的图解、实现、复杂度和稳定性分析
- C语言实例第3期:在控制台打印出著名的杨辉三角
- 图形学实验之显示一个飞机(C++实现)
- 派生类的构造【C++继承】
- H. Texas hold'em Poker(2019ICPC区域网络赛沈阳站)
- java系统教程_Java 教程(开发环境配置+基础语法)
- electron 样式不加载_electron-vue,启动之后没了样式和图片是什么原因呢,请大佬帮忙康康...
- c#语言呈现位置信息,c#实现根据网络IP显示地理位置功能示例
- java内存分析_java内存分析总结
- 深度学习每层的通道数如何计算_模型通道剪枝之DMCP: Differentiable Markov Channel Pruning...