DIV内容垂直居中
css垂直居中属性设置vertical-align: middle对div不起作用，例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Commpatible" content="IE=edge">
<title>DIV垂直居中对齐</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} html, body {
width: 100%;
height: 100%;
} body {text-align: center; vertical-align: middle;}
.outer {
width: 400px;
height: 120px;
position: relative;
left: 20px;
top: 20px;
text-align: center;
vertical-align: middle;
border: 1px dashed blue;
} .button {
width: 200px;
height: 40px;
}
</style>
</head>
<body>
<div class='outer'>
<button class='button'>在DIV中垂直居中</button>
</div>
</body>
</html>
运行后按钮没有在DIV中垂直居中：
解决思路：如果div和按钮的宽高都确定为具体像素值，可以直接设定按钮的css属性：position：relative; top为(div.height - button.height)/2，left为(div.width-button.height)/2；否则给按钮添加一个div父元素，宽高和按钮相 同，position设定为relative，top和left都为50%（即左上角位置设定在外层div的中心），再将按钮左上角位置坐标设定为父元素 div宽高（也等于按钮自身宽高）的-50%
详细代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Commpatible" content="IE=edge">
<title>DIV垂直居中对齐</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} html, body {
width: 100%;
height: 100%;
} body {text-align: center; vertical-align: middle;}
.outer {
width: 400px;/* 或者为百分比 */
height: 120px;
position: relative;
left: 20px;
top: 20px;
border: 1px dashed blue;
} .inner {
width: 200px;
height: 40px;
position: relative;
position: relative;
top: 50%;
left: 50%;
} .button {
width: 200px;
height: 40px;
position: relative;
top: -50%;
left: -50%;
}
</style>
</head>
<body>
<div class='outer'>
<div class='inner'>
<button class='button'>在DIV中垂直居中</button>
</div>
</div>
</body>
</html>
再次运行后，div中按钮上下居中显示
END
DIV内容垂直居中的更多相关文章
- div居中与div内容居中,不一样
1.div自身居中 使用margin:0 auto上下为0,左右自适应的css样式. 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠 ...
- [转]如何让div中的内容垂直居中
转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...
- div中的内容垂直居中的五种方法
一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
- 如何让div中的内容垂直居中
虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...
- CSS总结div中的内容垂直居中的五种方法
一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
- 使用CSS使内容垂直居中的N中方法。
使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论. 1.当待垂直居中的DIV高宽为已知时: ...
- 如何让div水平垂直居中
引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...
- DIV实现垂直居中的几种方法
说道垂直居中,我们首先想到的是vertical-align属性,但是许多时候该属性并不起作用.例如,下面的样式并不能达到内容垂直居中显示 div { width:200px; height:300px ...
- jquery鼠标移动div内容上下左右滚动
jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...
随机推荐
- 关于hp proliant sl210t服务器raid 1阵列配置
hp proliant sl210t服务器,一般都会带有两个阵列卡 一个服务器自带的Dynamic Smart Array B120i RAID控制器,一个为Slot卡槽上的Smart Array P ...
- ps软件使用的问题解决记录
1.PS的字体颜色改变不了的解决方法,添加字体的时颜色无论怎么选都只能有[黑.白.灰]三种颜色, 问题的原因:图像的模式选择了灰度(G) 解决方法:图像-->模式-->RG ...
- 【SPOJ419】Transposing is Fun Pólya定理+欧拉函数
[SPOJ419]Transposing is Fun 题意:给你一个$2^a\times2^b$的矩阵,将$1...n$中的数依次从左到右,从上往下填到矩阵里,再把矩阵转置,然后把所有数从左到右,从 ...
- wordpress---wp_query的使用方法
wp_query是一个wordpress用于复杂请求的的一个类,看到query懂开发的人就会反应这个是数据库查询的一个类,这个类可谓是非常有用的,可以帮助我们做很多复杂的查询. wp_query的使用 ...
- 获取页面所有链接的JS
写了一个实用的JS脚本,获取当前页面所有的JS: var str = " \n"; var list = document.getElementsByTagName("a ...
- Java工程师之Redis实战系列教程前言&目录
系列前言 Java工程师之Redis实战系列教程,同其他教程一样,均是在下学习笔记,本系列主要参考自<Redis-in-action>,将书本中的有趣的例子转化为能解决特定问题的示例程序, ...
- 企业案例（一）:由于mysql sleep线程过多小故障
1.什么是长连接 长连接是相对于通常的短连接而说的,也就是长时间保持客户端与服务端的连接状态. 通常的短连接操作步骤是: 连接->数据传输->关闭连接: 而长连接通常就是: 连接-> ...
- CSS水平导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- spring中的BeanFactory与ApplicationContext的作用和区别
BeanFactory 和ApplicationContext Bean 工厂(com.springframework.beans.factory.BeanFactory)是Spring 框架最核心的 ...
- 算法抽象及用Python实现具体算法
一.算法抽象 它们一般是在具体算法的基础上总结.提炼.分析出来的,再反过来用于指导解决其它问题.它们适用于某一类问题的解决,用辩 证法的观点看,抽象的算法和具体的算法就是抽象与具体.普遍性与特殊性.共 ...