让DIV中的内容水平和垂直居中
让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的。(页面设置height:100%;是无效的),这里使用绝对定位+负外边距的方式来实现垂直居中,但同时要考虑页面重置大小的情况,需要使用js来修正。
让一个DIV水平居中,直接用CSS就可以做到。只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中。
1、让层水平居中
1
2
3
4
5
|
.className{ width : 270px ; height : 150px ; margin : 0 auto ; } |
使用margin:0 auto;让层水平居中,留意宽度和高度必不可少。
2、一、让层垂直居中
1
2
3
4
5
6
7
8
|
.className{ width : 270px ; height : 150px ; position : absolute ; left : 50% ; top : 50% ; margin : -75px 0 0 -135px ; } |
将层设置为绝对定位,left和top为50%,这时候使用负外边距,负外边距的大小为宽高的一半。相对定位也可以实现
二、行高(line-height)法
如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
这段代码可以达到让文字在段落中垂直居中的效果。
该方法使用普遍,但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的,比方说需要弹出一个DIV层并且要居中显示,DIV的内容是动态的,所以宽度和高度也是动态的,这时需要用jQuery可以解决居中。
jQuery实现水平和垂直居中
jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS,获取DIV的左、上的边距偏移量,边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度,得到的值再除以2即左偏移量,右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成,就是每次改变窗口大小时,都要执行设置DIV的CSS,代码如下:
$(window).resize(function(){
$(".mydiv").css({
position: "absolute",
left: ($(window).width() - $(".mydiv").outerWidth())/2,
top: ($(window).height() - $(".mydiv").outerHeight())/2
});
});
此外在页面载入时,就需要调用resize()。
$(function(){
$(window).resize();
});
此方法的好处就是不需要知道DIV的具体宽度和高度大小,直接用jQuery就可以实现水平和垂直居中,而且兼容各浏览器,这个方法在很多的弹出层效果中应用。
让DIV中的内容水平和垂直居中的更多相关文章
- div中的内容水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
- div中的“内容”水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
- [转]如何让div中的内容垂直居中
转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...
- 如何让div中的内容垂直居中
虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...
- div中的内容居中
要使div中的内容居中显示,不仅div要设定“text-align:centr" ,内置对象要添加margin:auto;属性才能使其在firefox等其他浏览器中也能居中.
- div中让内容能不换行就尽量不换行.【纯原】
div中让内容能不换行就尽量不换行,部分左对齐,部分右对齐. <html> <head> <title>九歌·少司命</title> <style ...
- 怎样推断DIV中的内容为空
怎样推断DIV中的内容为空 1.问题背景 推断div内部是否为空.假设为空,给出无数据提示:否则显示正常页面 2.设计源代码 <!DOCTYPE html PUBLIC "-//W3C ...
- 如何让DIV相对于body水平和垂直居中
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
- DIV里面的图片水平与垂直居中的方法
<div class=“box”> <img /> </div> 1.水平居中: 1)box设置 text-align:center ; text-alig ...
随机推荐
- CentOS 下安装python 之MySQLdb
yum -y install mysql-devwget http://downloads.sourceforge.net/project/mysql-python/mysql-python-test ...
- git 用Gitk /usr/bin/which: no wish
/usr/bin/which: no wish 安装yum -y install tcl 和yum -y install tk 显示所有的分支 $gitk --all 显示所有的分支 $gitk -- ...
- [转]3天搞定的小型B/S内部管理类软件定制开发项目【软件开发实战10步骤详解】
本文转自:http://www.cnblogs.com/jirigala/archive/2010/10/07/1845275.html 2010-10-07 21:39 by 通用C#系统架构, 5 ...
- 2016.05.03,英语,《Vocabulary Builder》Unit 21
sub, means 'under', as in subway, submarine, substandard. A subject is a person who is under the aut ...
- HDR Defered Shading (using MRT)
http://http.download.nvidia.com/developer/SDK/Individual_Samples/DEMOS/Direct3D9/DeferredShading.zip ...
- Apache Spark源码走读之14 -- Graphx实现剖析
欢迎转载,转载请注明出处,徽沪一郎. 概要 图的并行化处理一直是一个非常热门的话题,这里头的重点有两个,一是如何将图的算法并行化,二是找到一个合适的并行化处理框架.Spark作为一个非常优秀的并行处理 ...
- swfit-pod使用
一.查询第三方版本号 pod search SDWebImage 二.项目添加pod 1.在终端打开项目路径 2.输入 pod init 生成Podfile 三.在Podfile输入需要的第三方 ...
- PHP 常用函数库和一些实用小技巧
PHP 常用函数库和一些实用小技巧 作者: 字体:[增加 减小] 类型:转载 包括文件读取函式,文件写入函式,静态页面生成函式,目录删除函式等 文件读取函式 //文件读取函式 function ...
- git rm –cached filename
为了能重新忽略那些已经被track的文件,例如停止tracking一个文件但是又不从仓库中删除它.可以使用以下命令: 代码如下 git rm –cached filename 上面这个命令用于删除单个 ...
- P1092 虫食算 NOIP2002
为了测试stl 30分的暴力写法... #include <bits/stdc++.h> using namespace std; const int maxn = 11; int n; ...