(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. Using IntelliJ IDEA as the Vim Editor

    转载自https://www.jetbrains.com/help/idea/using-intellij-idea-as-the-vim-editor.html This feature is on ...

  2. jsp笔记----jsp常用的的获取项目的根路径

    <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" ...

  3. js验证码实现

    <script language="javascript"> var code; //在全局 定义验证码 function createCode() { //创建验证码 ...

  4. 如何实现javascript js 类命名空间的写法

    转载 猫猫小屋http://www.maomao365.com/?p=823 在C#中有namespace概念,java中有package的概念,有了这些概念之后,在系统的运行时,每一个方法就会拥有唯 ...

  5. JS学习之路之JavaScript match() 方法

    match() 方法,在字符串内找到相应的值并返回这些值,()内匹配字符串或者正则表达式. 该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置. d ...

  6. 以太坊 ERC20 与 ERC721 深度解密

    去年11月份的一段时间,Ethereum网络突然变的特别拥堵,原因是兴起了一款以太坊养猫的Dapp游戏,超级可爱的猫形象,再加上配种,繁殖和拍卖等丰富的玩法,风靡了币圈. 一时间币圈大大小小的人都在撸 ...

  7. c/c++ 右值引用

    c/c++ 右值引用 转自:https://www.cnblogs.com/catch/p/3500678.html 左值(lvalue)和右值(rvalue)是 c/c++ 中一个比较晦涩基础的概念 ...

  8. 解决“Eclipse中启动Tomcat后,http://localhost:8080/无法访问”的问题

    这个问题是eclipse造成的,我们可以修改配置来实现通过eclipse启动tomcat可以访问http://localhost:8080 打开Server试图(打开前不要启动tomcat),双击其中 ...

  9. 聚类——KFCM

    聚类——认识KFCM算法 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 一.KFCM概述 KFCM:基于核的改进的模糊c均值聚类算法.它是通过核函数将 ...

  10. Photoshop怎么破解?PS怎么破解?

    Photoshop和PS这两个软件可以说是十分常见的图片处理软件了,Photoshop主要处理以像素所构成的数字图像进行图片编辑工作,而PS就更加强大了,它有很多功能,在图像.图形.文字.视频.出版等 ...