精华内容
下载资源
问答
  • DIV+CSS布局有很多值得学习的地方,这里大家描述一下关于DIV居中布局的实现方法,主要有三种方法,每种方法都有各自的特点,请看下文详细介绍,相信通过本文描述你对DIV居中布局一定会有深刻的认识。 关于DIV居中...

    DIV+CSS布局有很多值得学习的地方,这里和大家描述一下关于DIV居中布局的实现方法,主要有三种方法,每种方法都有各自的特点,请看下文详细介绍,相信通过本文描述你对DIV居中布局一定会有深刻的认识。

    关于DIV居中布局的几种实现方法

    现在DIV+CSS布局越来越流行了,怎么实现div居中好像是个难题。本文给出关于DIV居中布局的几种实现方法,相信会对大家有所帮助.

    第一种方法:

    body{  
    margin:0pxauto;  
    text-align:center;  
    }

     

    但是如果没申明下面这句解析方法,页面就会出错.不能居中对齐!

    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"  
     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

     

    但是有时候页面并不能全部按上面规定的代码格式来编写,比如说要改多彩滚动条.

    第二种方法:

    margin-left:50%;  
    left:-width/2; 

     

    这里的width不是CSS中的Width,而是你的DIV的宽度例如你的div是768px宽,那么你就应该设置left:-384px。

    第三种方法:使用JS来控制div居中.

    在页面之中添加了下面的一小段代码.

    <scriptlanguagescriptlanguage="javascript" 
     type="text/javascript"src="function.js"></script> 

     

    function.js内容:

    if(window.screen.width>800)  
    {document.write("<styletypestyletype=\"text/css\"> 
     body{margin-left:"+(window.screen.width-800)/2+"px}</style>");}  

     

    经过测试.可以正常实现DIV居中

    补充一点:上面这段JS必须放在你的最后一个CSS连接或</style>的后面.

    ◆下面是这种方法的详细讲解:

    首先解释一下JS中窗口和网页的几种尺寸属性的含义

    document.body.clientWidth(网页可见区域宽):是指浏览器显示网页的区域宽度,不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。

    document.body.clientHeight(网页可见区域高):是指浏览器显示网页的区域所能看到的高度,不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。

    document.body.scrollTop(网页被卷去的高):是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。

    document.body.scrollLeft(网页被卷去的左):是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。

    现在我们来分析一下程序该如何实现:

    第一步我们要实现的是使层在弹出时绝对DIV居中不去考虑是否有滚动条的情况。

    1.计算出层距离显示区域左边和上边的位置

    注意:divId指的是所要居中的层,divId.clientWidth为其宽度!

    vardivId=document.getElementById("xxx");  
    varv_left=(document.body.clientWidth-divId.clientWidth)/2;  
    varv_top=(document.body.clientHeight-divId.clientHeight)/2;  

     

    2.把得到的值重新赋给DIV的left和top属性

    divId.style.left=v_left;  
    divId.style.top=v_top;  

     

    说明:divId为DIV标签的id值,这样这个层就是DIV居中显示的了。

    第二步我们要实现的是使在拖动滚动条的情况下弹出的层也能居中。

    1.其实很简单我们只要把拖动的宽度和高度加到前面计算出来的左边距和上边距中就OK了。

    v_left+=document.body.scrollLeft;  
    v_top+=document.body.scrollTop;  

     

    2.把得到的值重新赋给DIV的left和top属性

    divId.style.left=v_left;  
    divId.style.top=v_top;  

     

    这样显示出来就是DIV居中的了。

    完整代码如下:

    <!doctypehtmlpublic“-//w3c//dtdhtml4.0transitional//en"> 
    <html> 
    <head> 
    <title>弹出的层居中显示</title> 
    <metanamemetaname="generator"content="editplus"> 
    <metanamemetaname="author"content=""> 
    <metanamemetaname="keywords"content=""> 
    <metanamemetaname="description"content=""> 
     
    </head> 
    <body> 
    <tablewidthtablewidth=100%> 
    <tr><td><spanonclickspanοnclick="divcenter()">test</span></td></tr> 
    <tr><td><spanonclickspanοnclick="divcenter()">test</span></td></tr> 
    <tr><td><spanonclickspanοnclick="divcenter()">test</span></td></tr> 
    <tr><td><spanonclickspanοnclick="divcenter()">test</span></td></tr> 
    <tr><td><spanonclickspanοnclick="divcenter()">test</span></td></tr> 
    <tr><td><spanonclickspanοnclick="divcenter()">test</span></td></tr> 
    </table> 
    <dividdivid=mxhstyle="position:absolute;  
    left:200px;top:30px;width:200px;height:200px;  
    background-color:navy;border:2px">我是居中显示的了。</div> 
    </body> 
    </html> 

     

    总结一下:

    主要是这句代码起的作用:(window.screen.width-800)/2//计算页面应该留出的边距数值.800为我的DIV宽度+滚动条宽度.实际应用改为你自己的大小.

    转载于:https://www.cnblogs.com/KevinG/p/3533375.html

    展开全文
  • DIV居中布局的三大实现方法

    千次阅读 2011-08-03 13:57:44
    现在DIV+CSS布局越来越流行了,怎么实现div居中好像是个难题。本文向大家介绍一下关于DIV居中布局的几种...你对DIV居中布局的方法是否了解,这里大家分享一下,因为现在DIV+CSS布局越来越流行了,怎么实现DIV居中好像

    现在DIV+CSS布局越来越流行了,怎么实现div居中好像是个难题。本文向大家介绍一下关于DIV居中布局的几种实现方法,希望对你有所帮助。

    AD:


    你对DIV居中布局的方法是否了解,这里和大家分享一下,因为现在DIV+CSS布局越来越流行了,怎么实现DIV居中好像是个难题。本文给出关于DIV居中布局的几种实现方法,相信会对大家有所帮助。

    关于DIV居中布局的几种实现方法

    现在DIV+CSS布局越来越流行了,怎么实现DIV居中好像是个难题。本文给出关于DIV居中布局的几种实现方法,相信会对大家有所帮助。

    第一种方法:

    1. body{  
    2. margin:0pxauto;  
    3. text-align:center;  

    但是如果没申明下面这句解析方法,页面就会出错.不能居中对齐!

    1. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

    但是有时候页面并不能全部按上面规定的代码格式来编写,比如说要改多彩滚动条.

    第二种方法: 

    1.  margin-left:50%;  
    2. left:-width/2; 

    这里的width不是CSS中的Width,而是你的DIV的宽度例如你的div是768px宽,那么你就应该设置left:-384px。

    第三种方法:使用JS来控制DIV居中.

    在页面之中添加了下面的一小段代码.

    1. <scriptlanguagescriptlanguage="javascript"type="text/javascript"src="function.js">script> 

    function.js内容:

    1. if(window.screen.width>800){document.write("<styletypestyletype=\"text/css\"> 
    2. body{margin-left:"+(window.screen.width-800)/2+"px}style>");} 

    经过测试.可以正常居中

    补充一点:上面这段JS必须放在你的最后一个CSS连接或的后面.

    ◆下面是DIV居中这种方法的详细讲解:

    首先解释一下JS中窗口和网页的几种尺寸属性的含义

    document.body.clientWidth(网页可见区域宽):是指浏览器显示网页的区域宽度,不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。

    document.body.clientHeight(网页可见区域高):是指浏览器显示网页的区域所能看到的高度,不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。

    document.body.scrollTop(网页被卷去的高):是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。

    document.body.scrollLeft(网页被卷去的左):是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。

    现在我们来分析一下程序该如何实现DIV居中

    ◆第一步我们要实现的是使层在弹出时绝对居中不去考虑是否有滚动条的情况。

    1.计算出层距离显示区域左边和上边的位置

    注意:divId指的是所要居中的层,divId.clientWidth为其宽度!@
    vardivId=document.getElementById("xxx");
    varv_left=(document.body.clientWidth-divId.clientWidth)/2;
    varv_top=(document.body.clientHeight-divId.clientHeight)/2;

    2.把得到的值重新赋给DIV的left和top属性

    divId.style.left=v_left;
    divId.style.top=v_top;
    说明:divId为DIV标签的id值
    这样这个层就是居中显示的了。

    ◆第二步我们要实现的是使在拖动滚动条的情况下弹出的层也能居中。

    其实很简单我们只要把拖动的宽度和高度加到前面计算出来的左边距和上边距中就OK了。
    v_left+=document.body.scrollLeft;
    v_top+=document.body.scrollTop;

    完整代码如下:

    1. > 
    2. <html> 
    3. <head> 
    4. <title>弹出的层居中显示title> 
    5. <metanamemetaname="generator"content="editplus"> 
    6. <metanamemetaname="author"content=""> 
    7. <metanamemetaname="keywords"content=""> 
    8. <metanamemetaname="description"content=""> 
    9.  
    10. head> 
    11.  
    12. <body> 
    13. <tablewidthtablewidth=100%> 
    14. <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> 
    15. <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> 
    16. <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> 
    17. <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> 
    18. <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> 
    19. <tr><td><spanonclickspanonclick="divcenter()">testspan>td>tr> 
    20. table> 
    21. <dividdivid=mxhstyle="position:absolute;left:200px;top:30px;width:200px;height:200px;  
    22. background-color:navy;border:2px">我是居中显示的了。div> 
    23. body> 
    24. html>




    二,用JS使层居中

    把如下代码加入<body>区域 <DIV id=L1 style="HEIGHT: 107px; LEFT: 341px; POSITION: absolute; TOP: 585px; WIDTH: 205px; Z-INDEX: 1">

    <TABLE bgColor=#ffffff border=1 borderColorDark=#ffffff borderColorLight=#000000 cellPadding=0 cellSpacing=0 width="100%">

    <TR>

    <TD height=1 width=178>□::BEST4U论坛::</TD>

    <TD align=middle οnclick="L1.style.visibility='hidden'"

    style="CURSOR: hand" width=21>х</TD></TR>

    <TR vAlign=top>

    <TD colSpan=2

    height=91>欢迎光临本站!<BR><BR>本站域名:<BR>http://webform.cn

    </TD></TR></TABLE></DIV>

    <SCRIPT LANGUAGE="JavaScript">

    function moveit() //这个函数用于把层放到浏览器

    {

    L1.style.left=((document.body.offsetWidth-parseFloat (L1.style.width))/2)+document.body.scrollLeft;

    L1.style.top=((document.body.offsetHeight-parseFloat (L1.style.height))/2)+document.body.scrollTop;

    }

    window.οnlοad=moveit; //网面打开时时执行moveit()

    window.οnresize=moveit; //当调整浏览器大小时执行moveit()

    window.οnscrοll=moveit; //当拉动滚动条时执行moveit()

    展开全文
  • [b]DIV+CSS布局有很多值得学习的地方,这里大家描述一下关于DIV居中布局的实现方法,主要有三种方法,每种方法都有各自的特点,请看下文详细介绍,相信通过本文描述你对DIV居中布局一定会有深刻的认识。...
    [b]DIV+CSS布局有很多值得学习的地方,这里和大家描述一下关于DIV居中布局的实现方法,主要有三种方法,每种方法都有各自的特点,请看下文详细介绍,相信通过本文描述你对DIV居中布局一定会有深刻的认识。

    关于DIV居中布局的几种实现方法[/b]

    [b]现在DIV+CSS布局越来越流行了,怎么实现div居中好像是个难题。本文给出关于DIV居中布局的几种实现方法,相信会对大家有所帮助.

    第一种方法[/b]:

    body{
    margin:0pxauto;
    text-align:center;
    } [/java]
    但是如果没申明下面这句解析方法,页面就会出错.不能居中对齐!

    [code="java"]
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"

    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


    但是有时候页面并不能全部按上面规定的代码格式来编写,比如说要改多彩滚动条.

    [b]第二种方法:[/b]

    margin-left:50%;  
    left:-width/2;
    这里的width不是CSS中的Width,而是你的DIV的宽度例如你的div是768px宽,那么你就应该设置left:-384px。

    第三种方法:使用JS来控制div居中.

    在页面之中添加了下面的一小段代码.

    <scriptlanguagescriptlanguage="javascript" 

    type="text/javascript"src="function.js"></script>
    function.js内容:

    if(window.screen.width>800)  
    {document.write("<styletypestyletype=\"text/css\">

    body{margin-left:"+(window.screen.width-800)/2+"px}</style>");}
    经过测试.可以正常实现DIV居中

    补充一点:上面这段JS必须放在你的最后一个CSS连接或</style>的后面.

    ◆下面是这种方法的详细讲解:

    首先解释一下JS中窗口和网页的几种尺寸属性的含义

    document.body.clientWidth(网页可见区域宽):是指浏览器显示网页的区域宽度,不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。

    document.body.clientHeight(网页可见区域高):是指浏览器显示网页的区域所能看到的高度,不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。

    document.body.scrollTop(网页被卷去的高):是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。

    document.body.scrollLeft(网页被卷去的左):是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。
    展开全文
  • 在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,所以对于图片的放置位置就得变化,那么,接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现居中的方法,对于有需要的朋友来说...

    在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,所以对于图片的放置位置就得变化,那么,接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现居中的方法,对于有需要的朋友来说可以做个参考。

    css图片居中分css图片水平居中和垂直居中两种情况,那么下面我们就来分别看一看这些图片居中的实现方法。

    一、首先,我们来看看css图片水平居中的方法

    1、利用margin: 0 auto实现图片水平居中

    css图片水平居中代码:

    > <div style="text-align: center; width: 500px; border: green solid 1px;">
    > 
    > <img alt=""src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"style="margin: 0 auto;"/>
    > 
    > </div>
    
    

    2、利用文本的水平居中属性text-align: center实现图片水平居中

    css图片水平居中代码:

    > <div style="text-align: center; width: 500px; border: green solid 1px;">
    > 
    > <img alt=""src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"style="display: inline-block;"/>
    > 
    > </div>
    
    

    二、我们来看看css图片垂直居中的实现方法

    1、利用高==行高实现图片垂直居中

    css图片垂直居中代码如下:

    > <div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">
    > 
    > <img alt=""src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"style="display: inline-block; vertical-align: middle;"/>
    > 
    > </div>
    
    

    注意:此种方法需要注明高度才可以使用。

    2、利用table实现图片垂直居中

    css图片垂直居中代码如下:

    > <div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">  
    > 
    > <span style="display: table-cell; vertical-align: middle; ">
    > 
    > <img alt=""src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"style="display: inline-block;"/>
    > 
    > </span>
    > 
    > </div>
    
    

    注意:此种方法是利用了table的垂直居中属性

    说明:这里使用display: table;和display: table-cell;来模拟table,这种方法并不兼容IE6/IE7,IE67不支持display: table,如果你不需要支持IE67那就可以用

    这种方法有一个缺点:当你设置了display: table;可能会改变你的原有布局

    3、利用绝对定位实现图片垂直居中

    css图片垂直居中代码如下:

    > <div style="width: 500px;height:200px; position: relative; border: green solid 1px;">
    > 
    > <img alt=""src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg"style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;"/>
    > 
    > </div>
    
    

    说明:如果已知图片的宽度和高度可以用这种方法。

    本篇文章到这里就结束了,更多请关注内容请关注我!!!

    专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节,互相交流学习,不停更新最新的教程和学习技巧(网页制作,网站开发,web开发,从0基础开始的的HTML+CSS+JavaScript。jQuery,Ajax,node,angular框架等到移动端HTML5的项目实战【视频+工具+系统路线图】全栈工程师学习路线以及规划都有整理,分享给小伙伴)点:学习前端,我们是认真的

    展开全文
  • div+css学习之一列布局

    2012-04-05 10:35:13
    前一节我们回顾了xhtml基础和css基础部分,今天我们正式开始使用网页制作软件——adobe公司出品的dreamweaver来开始网页设计之旅。相信之前您已经用过这个软件了,具体怎么使用我就不讲了。为了照顾部分朋友,今天...
  • 我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 ...
  • 最近正在学习 html5 刚接触 html5 感觉有点不适应因为有一些标签改变了特别 是 div, section article 这三个标签查了一些资料也试着用 html5 css3 布局网页稍微有 点头绪了 下边还有一个我刚刚布局好的一个简单的...
  • 俺也不知道,这看似很简单的命题实现起来有点复杂? 为什么我总需要百度来解决? 需要实现的效果就如上图, 如果只是简简单单的一个文字垂直居中(谁...先要有一个div将图片文字包括在里面, div的高和图片高一样, 然...
  • 一、解决层居中的问题 ...首先,我们一般再用DIV+CSS编程时,一般会用margin:0 auto;的属性进行设置,来保证层是居中浏览器显示的,可是就我测试来看,IE浏览器是不支持这种标签的,火狐谷歌的都是支持的。(PS
  • css图片后的文字无法居中对齐怎么解决?下面给大家介绍一下解决方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。比如说,现在我要做一个简单的删除按钮,只由一个icon“删除”两个字组成...
  • CSS将登录框水平垂直居中于浏览器,代码:无标题文档html,body{ margin:0;...}这里是登录 要点:1、登录面板div绝对布局(position:absolute;),位置topleft都是50%(相对于浏览器窗口尺寸);(现...
  • 我想要实现的是像THIS那样,就是有3个按钮,一个在左边,一个在中间,一个在右边,在同一个“线”,但是使用css和div,因为我知道使用表格来布局页面是错误的.我想我需要使用浮点数,并且我已经实现了正确的左右div,但是我不...
  • 在我们平时用DIVCSS布局网页的时候,经常碰到就是如何让div块水平垂直都居中的情况,今天,建站教程网就给大家提供两种方法: 方式一:利用定位及负边距 <!DOCTYPE html><html> <head> <...
  • 6. rem px 是怎么换算的 7. flex 的6个属性及其作用 8. 块元素行内元素的区别 9. 可以给行内元素设置宽高吗 10. 可以给行内元素设置margin吗 11. 两个平行的 div 的 margin 为20,他们的间距是多少 ...
  • 居中 position flex 等边三角形 块状元素有 ... bootstrap是怎么实现栅栏布局的,flex div模型,div的宽度由什么决定、高度由什么决定 实现一个宽高等比的div(不用css变量,用padding:100%即可) ...
  • 常见的HTML+CSS面试题

    2021-05-19 14:40:25
    2.怎么使一个盒子垂直居中 方法一 flex布局 display: flex; justify-content: center; align-items: center; 方法二定位 #div1 { width: 200px; height: 200px; background: red; position: relative;
  • 第二天 一列布局

    2012-09-14 14:47:04
    前一节我们回顾了xhtml基础和css基础部分,今天我们正式开始使用网页制作软件——adobe公司出品的dreamweaver来开始网页设计之旅。相信之前您已经用过这个软件了,具体怎么使用我就不讲了。为了照顾部分朋友,今天...
  • react-native 之布局

    2021-01-10 04:06:31
    <div>宽度单位像素密度 <p>react的宽度不支持百分比,设置宽度时不需要带单位 <code>{width: 10}</code>, 那么10代表的具体宽度是多少呢? 不知道是官网文档不全还是我眼瞎,反正是没...
  • 前端面试总结

    2018-09-28 04:48:46
    一、CSS面试题 选择器优先级怎么计算的 重绘重排(回流) ==> 页面重绘回流以及优化 (www.css88.com/archives/49…) ...一个div在页面水平垂直居中 固定大小 不固定大小 二、JS面试题 ...
  • 昨天刚一个上海的公司给我打电话面试,问了我一堆基础的东西,例如:position、响应式布局div盒子让我讲一讲这些怎么理解的… absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。...
  • 小白学前端08

    2017-05-14 23:50:00
    ) margin:0 auto -- 实现水平居中css进行布局有几种不同的方式,包括绝对定位使用负的边距值 基于浮动的布局是最容易使用的,也是最可靠的,只需设置希望定位的元素的宽度然后将它向左或向右浮...

空空如也

空空如也

1 2 3
收藏数 42
精华内容 16
关键字:

div和css布局怎么居中div