61阅读

首页 >  div垂直居中-div水平垂直居中的完美解决方案

div垂直居中-div水平垂直居中的完美解决方案

发布时间：2017-10-02 所属栏目：智能家居解决方案

一 : div水平垂直居中的完美解决方案

让div居中对齐
使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。
.style{margin-left:auto;margin-right:auto;}
缩写形式为：
.style{margin:0 auto;}
数字0 表示上下边距是0。可以按照需要设置成不同的值。

查看下面的例子：


<script language="JavaScript">ffcod = delpost.runcode12 .value; ffcod = (/
/g,''); delpost.runcode12 .value = ffcod;</script>提示：您可以先修改部分代码再运行

注意，需要加上上面的那句

才能生效，要是不想要这句的话，也可以给body加一个属性：
body{text-align:center;}

另外，让div内的内容（包括文字及图片）居中的代码是： text-align:center;

div居中的完美解决方案！（水平垂直居中）
1,关于居中使用css为：position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
对于ie6,只能把position:改成absolute;


<script language="JavaScript">ffcod = delpost.runcode13 .value; ffcod = (/
/g,''); delpost.runcode13 .value = ffcod;</script>提示：您可以先修改部分代码再运行

二 : div+css全屏自适应+水平垂直居中 【同事武功传授】

代码作者：同事宁儿； 

浏览吸收者：本人天少侠

代码如下：

verticalalign div+css全屏自适应+水平垂直居中 【同事武功传授】verticalalign div+css全屏自适应+水平垂直居中 【同事武功传授】div+css全屏自适应[整体垂直居中]

/*兼容ie7-ie9、火狐、谷歌浏览器，div+css全屏自适应[整体垂直居中]*/ /*author:sn，time:2012-12-7*/ /*visitor:htt time:2012.12.7*/ /*html样例*/ <!DOCTYPE html PUBLIC "-//W3C//Ddiv XHTML 1.0 divansitional//EN" "http://www.w3.org/div/xhtml1/Ddiv/xhtml1-divansitional.ddiv"> <!-- saved from url=(0080)http://emap.shasm.gov.cn/TianDiTuSX/ResourceCenter/ServiceDetailInfo.aspx?ID=770 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head>  <link rel="stylesheet" href="divPosition.css" type="text/css" /> </head> <body>  <div></div><!--定位元素，页面不显示，只为页面容器整体垂直对齐作参照-->  <div><!--父级垂直居中--> <!--子级上中下排列-->  <div id='divTop'>  </div>  <div id='divBody'>  </div>  <div id='divBottom'>  </div>  </div> </body> </html> /*css样例（divPosition.css）*/ html,body{  height: 100%;/*设置html和body的width和height为100%，可使全屏生效*/  width: 100%;  font-size: 16px;  font-family: 微软雅黑, 宋体, 黑体;  color: #535353;  margin: 0px; /*设置上下左右的相对位置为0，可避免超出范围出现滚动条*/ } body {  white-space: nowrap;/*设置white-space:nowrap，同时在相对参照元素中线居中时设定display:inline-block，可避免浏览器缩放时，垂直居中的容器换行*/  text-align: center;/*设置text-align: center，可使子容器水平对齐*/ } div {  display: inline-block;/*div内联不换行，ie8和ie9不识别带*的样式，只执行第一个display，ie6和ie7识别带*的样式，执行第二个display和zoom*/  *display:inline;/*ie6和ie7兼容display: inline-block，以【*display:inline;*zoom:1;】代替*/  *zoom:1; } .verticalAlign {  vertical-align: middle;/*设置vertical-align: middle，可使此和同一级别元素中线对齐*/  height: 100%;  width: 0px; /*设置width:0px，可使此元素不显示，只为页面容器整体垂直对齐作参照*/  border: none;  padding: 0px;  margin: 0px 0px 0px -5px;/*设置mrgin-right:-5px，避免容器横向超出*/ } .divAll {  width: 100%;  height: auto;  vertical-align: middle;/*设置vertical-align: middle，相对同一级别元素中线对齐*/  margin: 0px;  border: none;  padding: 0px; } /*以上为父级垂直居中，以下为子级上中下排列*/ .divBody {  width: 100%;  min-width: 900px;  vertical-align: middle;/*设置vertical-align: middle，相对同一级别元素中线对齐*/  margin: 0px;  border: none;  padding: 0px; } .divTop {  background-image: url(../images/serviceDetail_logo.png);  background-repeat: no-repeat;  height: 61px;  width: 80%;  min-width: 900px;  margin-left: auto;/*设置高度，并设置margin的left和right为auto，在非absolute情况下可水平居中*/  margin-right: auto;  border-bottom: 5px solid #ff8a00;  vertical-align: top;/*设置vertical-align: top，相对同一级别元顶端对齐*/  display: block;/*div内联换行*/ } .divBottom {  width: 100%;  min-width: 900px;  height: 100px;  margin: 0px;  vertical-align: bottom;/*设置vertical-align: bottom，相对同一级别元素底端对齐*/  display: block; }

三 : CSS文字垂直居中

[css 居中]CSS文字垂直居中——简介
文字在div中居中一直是个问题，而且也有很多方法可以居中。我就说个最简单最大众化的吧。
[css 居中]CSS文字垂直居中——详细知识

[css 居中]CSS文字垂直居中 一
一、单行垂直居中 如果一个容器中只有一行文字，对它实现居中相对比较简单。先看代码吧。
我们要垂直居中的文字为‘how are you’
<div style=' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center' >how are you`</div>

[css 居中]CSS文字垂直居中 二
那我们先来看看效果图片吧。height的高度要等于line-height。这样文字就可以居中了。
也许还是不满足还想横着居中吧。

[css 居中]CSS文字垂直居中 三
先看看代码吧。
<div style=' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center' >how are you`</div>
这行代码也就是多了text-align:center。
这个就横着居中

[css 居中]CSS文字垂直居中 四
来看看效果图片吧。
本文标题：div垂直居中-div水平垂直居中的完美解决方案
本文地址： http://www.61k.com/1114431.html

61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1