div+css 居中

来源:互联网 发布:淘宝卖家怎么招代理 编辑:程序博客网 时间:2024/05/04 08:21

<!-- /* Font Definitions */ @font-face{font-family:宋体;panose-1:2 1 6 0 3 1 1 1 1 1;mso-font-alt:SimSun;mso-font-charset:134;mso-generic-font-family:auto;mso-font-pitch:variable;mso-font-signature:3 135135232 16 0 262145 0;}@font-face{font-family:"/@宋体";panose-1:2 1 6 0 3 1 1 1 1 1;mso-font-charset:134;mso-generic-font-family:auto;mso-font-pitch:variable;mso-font-signature:3 135135232 16 0 262145 0;}@font-face{font-family:新宋体;panose-1:2 1 6 9 3 1 1 1 1 1;mso-font-charset:134;mso-generic-font-family:modern;mso-font-pitch:fixed;mso-font-signature:3 135135232 16 0 262145 0;}@font-face{font-family:"/@新宋体";panose-1:2 1 6 9 3 1 1 1 1 1;mso-font-charset:134;mso-generic-font-family:modern;mso-font-pitch:fixed;mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal{mso-style-parent:"";margin:0cm;margin-bottom:.0001pt;text-align:justify;text-justify:inter-ideograph;mso-pagination:none;font-size:10.5pt;mso-bidi-font-size:12.0pt;font-family:"Times New Roman";mso-fareast-font-family:宋体;mso-font-kerning:1.0pt;} /* Page Definitions */ @page{mso-page-border-surround-header:no;mso-page-border-surround-footer:no;}@page Section1{size:612.0pt 792.0pt;margin:72.0pt 90.0pt 72.0pt 90.0pt;mso-header-margin:36.0pt;mso-footer-margin:36.0pt;mso-paper-source:0;}div.Section1{page:Section1;}-->

水平居中: 

1.div {margin-left: auto; margin-right:auto; } 或者margin:0 auto;

但如果调整 margin-topmargin-bottom 会失去CSS水平居中效果

     或者text-align: center ,这个需要设置上一级属性,加一层div

说明 : 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中; 对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定 时再加上“MARGIN-RIGHT:auto;MARGIN-LEFT: auto; ”需要说明的是,如果你想用这个方法使整个页面要居 中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义MARGIN -RIGHT: auto;MARGIN-LEFT: auto;就可以了。

 

垂直居中

 

1. vertical-align:middle; 表示行内垂直居中,我们将行距增加到和整个DIV一 样高line-height:200px;然后插入文字,就垂直居中了。

 #center{ MARGIN-RIGHT: auto; MARGIN-LEFT: auto; height:200px; vertical-align:middle; line-height:200px; }

 

2. 设置背景图片的方法

   body{BACKGROUND: url("sample.gif") #FFF no-repeat center;}

 

$this—Jquery对象

this – Dom对象

原创粉丝点击