二十:让行内元素在div中垂直居中
(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中垂直居中的更多相关文章
- 整理一下CSS最容易躺枪的二十规则,大家能躺中几条?
整理一下CSS最容易躺枪的二十规则,大家能躺中几条? 转载:API中文网 一.float:left/right 或者 position: absolute 后还写上 display:block? 二. ...
- 一个未知宽高的元素在div中垂直水平居中
<body> <div id="#div1"> <img src="img1.png"></img> </ ...
- PHP方便快捷的将二维数组中元素的某一列值抽离出来作为此二维数组内元素的key
得益于PHP的强大的内置数组函数array_column();array_combine(); 举个小栗子: <?php // 先查询出用户的基本信息 $userArray = [['id' = ...
- 图片文字混排的垂直居中、inline-block块元素和行内元素混排的垂直居中问题
图片.文字混排: 不管图片和文字的前后位置,都要给 图片 设置 vertical-algin,而不是谁在前面给谁设置. 此方法兼容IE7+ 和其它主流浏览器.IE7-没有测. inline-block ...
- 小的div在大的div中垂直居中
方法一: 1.代码: <div style="width:200px;height:200px;border:solid blue;position:relative;"&g ...
- 设置span在div中垂直居中
转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居 ...
- 未知行数的文字在div中垂直居中
今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...
- 让块元素在div中水平居中,并且垂直居中的五种方法
在写代码前,先做下准备工作,写两个div,设置下div的大小,把小的div放在大的div里面.可以给小的div设置下颜色,方便观看. 方法一:写一个伪元素,将它设置为行内块元素,高度与父元素相同,写一 ...
- 《剑指offer》查找二维数组内元素 c++
在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序. 请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. cl ...
随机推荐
- Alwayson查询主副本不同的JOB,Linkserver,Login
DECLARE @SQL AS VARCHAR(5000), @Primary AS VARCHAR(50), @Secondy AS VARCHAR(50); SELECT @Primary='AA ...
- Android 加了自定义Application后报错 Unable to instantiate activity ComponentInfo ClassNotFoundException
在Android自定义一个类继承集成Application后,并在AndroidManifest.xml里面配置了application的name属性为该类名称后报错: Unable to insta ...
- 简单易懂的程序语言入门小册子(7):基于文本替换的解释器,加入continuation,重构解释器
或许在加入continuation之前要先讲讲费这么大劲做这个有什么意义. 毕竟用不用continuation的计算结果都是一样的. 不过,这是一个兴趣使然的系列,学习这些知识应该完全出于好奇与好玩的 ...
- Zabbix监控文件是否存在/文件大小
检查C:\Zabbix\zabbix_agentd.log文件是否存在 zabbix_get -s 10.16.4.1 -k vfs.file.exists[C:\\Zabbix\\zabbix_ag ...
- 缺少 mysqli 扩展。请检查 PHP 配置。
安装了新的lamp,想打开数据库,结果出现了这种错误: phpMyAdmin - 错误缺少 mysqli 扩展.请检查 PHP 配置. <a href="Documentation.h ...
- php循环删除checkbox
一.首先要了解sql语句$SQL=delete from `user` where id in (1,2,4); 表单大概是:form action= method=post input name=I ...
- 力扣算法题—051N皇后问题
#include "000库函数.h" //使用回溯法来计算 //经典解法为回溯递归,一层一层的向下扫描,需要用到一个pos数组, //其中pos[i]表示第i行皇后的位置,初始化 ...
- pom文件miss artifact com.sun:tools:jar:1.5.0:system问题
问题现象: 导入新的maven项目时,有时候pom.xml文件会提示一个错误信息:Missing artifact com.sun:tools:jar:1.5.0:system 问题原因: maven ...
- Problem UVA11134-Fabled Rooks(贪心)
Problem UVA11134-Fabled Rooks Accept: 716 Submit: 6134Time Limit: 3000mSec Problem Description We w ...
- Android-SpinKit 进度条 (ProgressBar)
项目地址: https://github.com/ybq/Android-SpinKit 类别: 进度条 (ProgressBar) 打分: ★★★★★ 更新: 2016-03-28 11:17 大小 ...