php中表格怎么垂直居中,如何利用display:table-cell实现垂直居中?
在网页布局中,我们经常会需要让图片或者文字垂直居中,实现垂直居中的方法也有很多种,今天就给大家介绍一下利用display:table-cell属性实现垂直居中的方法,下面我们看看具体内容。
首先我们来简单认识一下display:table-cell属性
display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签,使用display:table-cell让大小不固定元素垂直居中。
接下来我们就来看display:table-cell实现垂直居中的具体示例:
Document
.img{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 200px;
height: 300px;
border: 1px solid lightgreen;
background-color: lightblue;
}
.text{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 300px;
border: 1px solid lightgreen;
padding: 10px;
background-color: lightblue;
}
php中文网在线免费教程
display:table-cell实现垂直居中效果如下:
注意:1、IE6/7不支持display:table-cell属性;2、table-cell不支持margin属性(但支持padding),就很僵硬; 3、尽量不要和浮动/定位同时用,会破坏它的css属性。
以上就是本篇文章的全部内容了,关于display:table-cell属性更多的知识大家可以参考php中文网css学习手册。
php中表格怎么垂直居中,如何利用display:table-cell实现垂直居中?相关推荐
- html表格图片垂直居中 css,利用Display: table;实现img图片垂直居中
html代码: CSS代码: .tablebox{width: 300px;height: 250px;bac公斤round: #fff;display: table} #imgbox{display ...
- python word中表格字体设置_利用Python-docx 读写 Word 文档中的正文、表格、段落、字体样式等...
前言: 前两篇博客介绍了 Python 的 docx 模块对 Word 文档的写操作,这篇博客将介绍如何用 docx 模块读取已有 Word 文档中的信息. 本篇博客主要内容有: 1.获取文档的章节信 ...
- html div 水平垂直居中显示,利用CSS实现div水平垂直居中
实现居中的方案有很多,这里介绍下纯CSS使用absolute配合margin的方案. 1. p宽高固定width: 400px; height: 200px; position: absolute; ...
- 微信小程序之获取后台动态数据表格布局display:table
微信小程序之获取后台动态数据表格布局display:table 猿来独往 2018-09-02 本文没有采用flex布局和grid布局来设置表格的,而是通过 display: table;来设置. 一 ...
- 自动化处理--python读取word中表格内容
from operator import length_hint from sqlite3 import DatabaseError import docx from docx import Docu ...
- CSS display:table
概念 display:table可以在div等标签中实现表格的效果 display:table :相当于table标签 display:table-row :相当于tr标签 display:table ...
- php垂直居中代码_div标签:水平居中和垂直居中的实现(附代码)
本篇文章给大家带来的内容是关于div标签:水平居中和垂直居中的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在前端开发时,经常会遇到需要居中的情形,居中分2种情况,一个是水平居 ...
- display:table的用法
目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出来的文件k数比用table写出来的要小 ...
- word文档中插入公式的技巧--利用表格
word文档中插入公式的技巧--利用表格 本人愚笨之前在word中加公式的时候,由于需要公式的编号右对齐,且公式居中.我就会在插入了公式之后打上一堆的空格,这样既费事儿,又弄的公式参差不齐,不是十分的 ...
最新文章
- Android stadio litepal
- C#制作图片压缩工具
- 运维大数据可视化分析平台来了,枯燥运维数据也可以生动起来
- python编码效率高吗_【原创】杠精的日常-讨论python快排的效率
- Linux之dd命令详解
- 第6课 仿Siri机器人-语音朗读和语音识别
- python中的iter()函数与next()函数
- 原生JS获取元素属性值
- Android系统onKeyDown监控/拦截/监听/屏蔽返回键、菜单键和Home键
- vscode运行vue时,显示loader. js SyntaxError: Unexpected identifier
- 1061 判断题 (15 分)—PAT (Basic Level) Practice (中文)
- android 整人代码‘’,史上最全的 整人代码
- 33.Jump Game(跳步游戏)
- 如何开发出一款直播APP项目实践篇 -【原理篇】
- Actor模型的优缺点
- vb.net 教程 3-4 窗体编程 公共控件6 PictureBox ProgressBar
- OpenStack云计算与HPC之一: 前言和OpenStack与HPC虚拟化
- 量化交易 多因子打分法策略
- 花了一晚上时间,终于把Python的基本用法归纳好了
- intellij idea中设置mybatis的xml配置文件的背景色
热门文章
- nginx开机启动脚本
- 一起来学jquery!
- 搭建基于LAMP的web应用程序平台
- android之ScrollView里嵌套ListView(转)
- 8-9 实现原理-1
- 项目实体类报错_分享elasticserch在质检算法项目中的应用
- dvd清洗碟效果好吗_【你用对了吗?】清洗果蔬哪个好?盐水?淘米水?清洗液......
- 搜索文献_搜索参考文献?6个搜索小技巧,搞科研需知!
- php过去文件夹总数,用php获取文件夹内文件的数量
- github上成员贡献量_Bifrost 长期贡献规则,获得 BNC 的 5 种方式