(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. RHEL下SendMail修改发邮箱地址

    RHEL(Oracle Linxu/CentOS)系统下,如果使用sendmail发送邮件,如果不特殊设置,一般发件箱地址为user@hostname,例如,hostname为DB-Server.lo ...

  2. ASP.NET MVC概述及第一个MVC程序

    一.ASP.NET 概述        1. .NET Framework 与 ASP.NET                .NET Framework包含两个重要组件:.NET Framework ...

  3. HttpHandler实现网页图片防盗链

    using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary ...

  4. malloc和calloc用法

    malloc和calloc用法 #include <stdio.h> #include <stdlib.h> int main(){ int n; printf("i ...

  5. Hexo使用细节及各种问题

    解决markdown图片不显示(返回403 forbidden).添加本地图片无法显示.修改文章page模板.同时部署发布同步到多个仓库站点(Github.coding.gitee 码云) 图片不显示 ...

  6. Linux系统挂载Windows的共享文件夹

    解决方案 在window上文件设置共享权限 在Linux上在 使用mount 命令挂载 Windows 共享文件夹 实验环境 redhat linux 7操作系统 服务器IP 192.168.100. ...

  7. LeetCode算法题-First Bad Version(Java实现-三种解法)

    这是悦乐书的第200次更新,第210篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第66题(顺位题号是278).您是产品经理,目前领导团队开发新产品.不幸的是,您产品的最 ...

  8. "敏捷革命"读书笔记

    最近看可一本书 书名叫<敏捷革命>外国著作中文翻译 本来想自己总结读后感但是本书后面都有本章的总结,所以下面都已摘抄为主,以备之后快速浏览 第一章 世界的运作方式已经打破 规划是有用的,而 ...

  9. echarts图表大小随着外部div大小变化

    jquery有resize()事件,但直接调用没有起作用,引入jquery.ba-resize.js文件就可以了. 例如: <div class="chart" > & ...

  10. nginx入门与实战

    网站服务 想必我们大多数人都是通过访问网站而开始接触互联网的吧.我们平时访问的网站服务 就是 Web 网络服务,一般是指允许用户通过浏览器访问到互联网中各种资源的服务. Web 网络服务是一种被动访问 ...