(1)使用display:table-cell配合vertical-align:center(淘宝也是这样用的)

<div class="method4">
<span>第四种方法</span>
</div> <style>
.method4 {
width: 200px;
height: 200px;
vertical-align: middle;
display: table-cell; /*只支持IE8+及现代浏览器,与position:absolute;或float:left;属性尽量不一起用*/
text-align: center;
background-color:#00ACED;
}
.method4{
width:100px;
height:100px;
background-color:#0A58A0;
}
</style>

  

二十:让行内元素在div中垂直居中的更多相关文章

  1. 整理一下CSS最容易躺枪的二十规则,大家能躺中几条?

    整理一下CSS最容易躺枪的二十规则,大家能躺中几条? 转载:API中文网 一.float:left/right 或者 position: absolute 后还写上 display:block? 二. ...

  2. 一个未知宽高的元素在div中垂直水平居中

    <body> <div id="#div1"> <img src="img1.png"></img> </ ...

  3. PHP方便快捷的将二维数组中元素的某一列值抽离出来作为此二维数组内元素的key

    得益于PHP的强大的内置数组函数array_column();array_combine(); 举个小栗子: <?php // 先查询出用户的基本信息 $userArray = [['id' = ...

  4. 图片文字混排的垂直居中、inline-block块元素和行内元素混排的垂直居中问题

    图片.文字混排: 不管图片和文字的前后位置,都要给 图片 设置 vertical-algin,而不是谁在前面给谁设置. 此方法兼容IE7+ 和其它主流浏览器.IE7-没有测. inline-block ...

  5. 小的div在大的div中垂直居中

    方法一: 1.代码: <div style="width:200px;height:200px;border:solid blue;position:relative;"&g ...

  6. 设置span在div中垂直居中

    转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居 ...

  7. 未知行数的文字在div中垂直居中

    今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...

  8. 让块元素在div中水平居中,并且垂直居中的五种方法

    在写代码前,先做下准备工作,写两个div,设置下div的大小,把小的div放在大的div里面.可以给小的div设置下颜色,方便观看. 方法一:写一个伪元素,将它设置为行内块元素,高度与父元素相同,写一 ...

  9. 《剑指offer》查找二维数组内元素 c++

    在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序. 请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. cl ...

随机推荐

  1. gitolite的部署

    gitolite服务部署: 1,在git服务器端安装git并创建git用户. yum install -y git useradd git 2,生成gitolite的管理账户,这个账户也可以在git服 ...

  2. sql语句中的join用法(可视化解释)

    一.innerjoin innerjoin总结来说就是 ,如A知道通往B如何走:B知道通往C如何走:但是A不知道通往C如何走,但是A可以通过B获得去往C的通往方式.. 首先,假设有A,B两张表,结构及 ...

  3. Oracle EBS FORM 更改记录状态

    get到一个新的思路. 因为validate触发器是无法做go_block或者loop操作的,因此可以尝试修改数据块属性,将状态更新为改动的,触发 ON-UPDATE 触发器,将循环或者跳转语句加入到 ...

  4. SQL SERVER 查询哪些存储使用了该表

    SELECT obj.Name 存储过程名, sc.TEXT 存储过程内容 FROM syscomments sc INNER JOIN sysobjects obj ON sc.Id = obj.I ...

  5. Windows Server 2016-Nano Server介绍

    WindowsServer 2016 提供了新的安装选项:Nano Server.Nano Server 是针对私有云和数据中心进行优化的远程管理的服务器操作系统. 类似于 Windows Serve ...

  6. Windows 系统下 mysql workbench 的安装及环境配置

    1.MySQL的官网地址:https://www.mysql.com/ 2,选择DOWNLOADS 3.选择community 再MySQL workbench 4.安装MySQL workbench ...

  7. Tomcat配置自定义JAVA环境

    Tomcat的bin目录下 在setclasspath.sh(Linux系统,Windows系统为setclasspath.bat)文件的开头添加: export JAVA_HOME=/usr/lib ...

  8. JavaScript -- 时光流逝(八):js中的事件Event的使用

    JavaScript -- 知识点回顾篇(八):js中的事件Event的使用 事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. (1) onabort : onabort 事件会在图像 ...

  9. Pycharm用鼠标滚轮控制字体大小

    一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) ...

  10. 枚举应用demo

    package com.xx; public enum PositionEM{ ONE(1,"领导"), TWO(2,"员工"); private Long v ...