三个表格居中纵向html,前端技巧集：图与表三步垂直居中

目标

一个图片img和一个表格table，并且图片与表格共享一行。

实现

1. 在HTML中加上一个图片和表格

代码中写两个元素：图片与表格，为了观察方便给他们加上个红色边框。

代码如下：

进击的DOCTYPE

table,img {

border: 1px solid red;

}

单元格	单元格	单元格	单元格	单元格
单元格	单元格	单元格	单元格	单元格
单元格	单元格	单元格	单元格	单元格

在Chrome显示结果如下：

1.png

2. 把图片和表格放到一行中

因为table是个块元素是独占一行的，所以，把table的CSSdisplay属性改为inline-block就好了，代码如下：

table {

display : inline-block;

}

效果变成如下：

2.png

虽然结果有些奇怪，但是还是在一行了。

3. 让图片与表格垂直居中

给图片加上vertical-align : middle属性，图片和表格垂直对齐居中了。

img {

vertical-align : middle;

}

效果见下图：

3.png

拓展

垂直居中是常用对齐方式，这里使用了vertical-align属性。不只是表格，只要是display为inline-block的标签就可以，vertical-align当中有许多的属性，用于其他各种场景。童鞋可先行尝试，请静待下回分解。

三个表格居中纵向html,前端技巧集：图与表三步垂直居中相关推荐

前端实现图片悬浮_前端技巧集：三步制作图片悬浮文字
鼠标悬停在图片上显示文字,是电商网页经常使用的效果,下面三步教会大家CSS如何完成这个效果. 前提 HTML图片和文字是并列显示的.如下: 我是雪豹 1. 将文字浮在图片上我们加个div把图片和文字 ...
三线表是什么？R语言使用table1包绘制（生成）三线表、使用单变量分列构建三线表、通过topclass参数自定义三线表表格的显示形式（显示为类似斑马线、并将所有列居中，包括包含行标签的第一列）
三线表是什么?R语言使用table1包绘制(生成)三线表.使用单变量分列构建三线表.通过topclass参数自定义三线表表格的显示形式(显示为类似斑马线.并将所有列居中,包括包含行标签的第一列) 目录
前端技巧培训-后台战友快速入门
前端技巧培训-后台战友快速入门一.工具 webstorm/vscode node环境/npm (一般安装node自带安装npm的) 可以安装淘宝镜像(下载依赖包比较快) node安装教程淘宝镜像安 ...
Excel表格4个打印小技巧
Excel表格4个打印小技巧目录 Excel表格4个打印小技巧一.只打印部分区域,不全部打印,框选打印区域点击[页面布局][打印区域][设置打印区域] 二.在打印预览时发现表格有几列超出打印区域, ...
html怎么让表格整体置顶,css如何让表格居中？
CSS控制整个表格居中,不只是让表格里的文字居中,是整个表格居中 1.不用table的align="center",要用CSS实现 2.不加标签表格的居中和div的居中是一样的 ...
iView学习笔记(三)：表格搜索，过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
html th表格居中,HTML----之表格
一.创建表格的基本语法: 单元格内的文字 ... ... 总结: 表格的主要目的是用来显示特殊数据的一个完整的表格有表格标签(table),行标签(tr),单元格标签(td)组成,没有列的标签中只 ...
前端表格导出为excel方法合集
前端表格导出为excel方法合集近来遇到了前端表格保存为excel的需求,通过查阅多方资料,总结了3种方法,下面一一进行展示,有不正确的地方,望指正.主要包括两种导出方法--纯前端导出和前端接收后端 ...
让学前端不再害怕英语单词（三）
前两章直通车↓↓↓ 让学前端不再害怕英语单词(一) 让学前端不再害怕英语单词(二) 由于前两章都反响强烈,都上了全站的热榜,所以今天打算把第三章也写出来第三章我们主要讲一下css中的伪类的英语单词还 ...

三个表格居中纵向html,前端技巧集：图与表三步垂直居中

三个表格居中纵向html,前端技巧集：图与表三步垂直居中相关推荐

最新文章

热门文章