精华内容
下载资源
问答
  • 网页内容居中

    2010-07-04 10:31:07
    2011.01.22 ,只要设置了...div +css 让整个网页面的内容自动居中 1. 主要有用到 css 中的 margin 和text-align 属性 example: [code="html"] query-autocomplete ...
    2011.01.22 ,只要设置了width:960px;margin:0 auto; 这几个样式就可以了
    


    div +css 让整个网页面的内容自动居中
    1. 主要有用到 css 中的 margin 和text-align 属性

    example:





    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <base href="<%=basePath%>">

    <title>query-autocomplete</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

    <style type="text/css">
    body {
    margin: 0px auto;

    /*在IE6中需用到,否则不会居中*/
    text-align: center;
    }

    .main {
    /*除了在body中设置了margin:0px auto; 还需要在要居中的块中设置此属性*/
    margin: 0px auto;
    width: 600px;
    height: 300px;
    background-color: gray;
    text-align: center;
    }
    </style>


    </head>

    <body>
    <div class="main">
    <div>
    query auto complete.
    </div>
    <div style="float: left">
    <lable>
    Input
    </lable>
    </div>
    </div>
    </body>
    </html>


    展开全文
  • 网页内容居中问题

    2014-12-15 09:53:00
    现代学网页技术的同学越来越多,但是很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!...

    现代学网页技术的同学越来越多,但是很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是水平居中的意思,呵呵!小六哥哥在这里说两个典型的错误引起的不能居中的问题:

    1、没有设置宽度

    没有高度宽度的div,就好像不存在的东西一样,除非你设置了border宽度,要不然你休想在网页里看到它。

    <div style="margin:0 auto;"></div>
    看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手比较容易忽略的问题!

    2、没声明DOCTYPE
    ①DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分!

    ②看看下面的代码,是不是很熟悉?像这样的,在文档最顶端,所有代码之上的乱七八糟的东西,就是用来声明DOCTYPE的!
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    ③你有三种选择,用来声明DOCTYPE
    * 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法),完整代码如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    * 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>,完整代码如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    * 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD,完整代码如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

    ④至于选择哪种。。使用过度的就可以了。。

    说了半天,margin:0 atuo;不起作用,不能居中的话,看看你的文档最顶端有没有声明DOCTYPE,没有就复制粘贴一下,就可以了!

     

    最后面介绍我常用的一种解决方案,完美秒杀任何浏览器的兼容

    1 body {
    2     margin: 0;
    3     padding: 0;
    4     color:#777;
    5     font:12px Verdana,Arial,Tahoma;
    6     text-align:center;
    7     background:#fff;
    8 }

    后面的div盒子模型,全部采用左浮动,float:left;

    至于有的网友会问,那么我的网页盒子模型之间的空白怎么弄出来呢?如果这个你想不到,我只好说你不适合学网页前端设计,绝对没有用到像margin-left,margin-right这些属性。不懂的朋友私信我吧

    转载于:https://www.cnblogs.com/nn-xiaoliuzi/p/4164190.html

    展开全文
  • 网页内容居中显示

    2013-09-19 14:17:33
    HTML Header Content Footer CSS #container{margin:0 auto;width:600px;border:1px solid red;} #header{border:1px solid...
    HTML
    

    <body>

    <form>

    <div id="container">

    <div id="header">Header</div>

    <div id="content">Content</div>

    <div id="footer">Footer</div>

    </div>

    </form>

    </body>

    CSS

    <style type="text/css">

    #container{margin:0 auto;width:600px;border:1px solid red;}

    #header{border:1px solid blue;}

    #content{height:360px;}

    #footer{border:1px solid green}

    </style>
    展开全文
  • 火狐浏览器下的网页内容居中方法2009-11-05 14:27父容器(DIV)中 text-align:center; 然后在子容器中比如:div中:margin:auto; 或者:table中: margin:auto; 可以看出在firfox中margin属性对内容居中的重要性。...
    [quote]
    
    火狐浏览器下的网页内容居中方法2009-11-05 14:27父容器(DIV)中 text-align:center;
    然后在子容器中比如:div中:margin:auto; 或者:table中: margin:auto;
    可以看出在firfox中margin属性对内容居中的重要性。IE中只要在父容器中设置text-align:center;其子内容就会自动居中。
    例子:
    body{text-align:center;}
    div{margin:auto;}
    实现页面内容居中

    <div> <table></table> </div>
    div{text-align:center;}
    table{margin:auto;}
    就能事项table在DIV中的居中显示


    body
    {
    margin:0px;
    padding:0px;
    text-align:center;
    font-size:12px;
    }

    #Main
    {

    text-align:left;
    width:950px;
    background-color:White;
    margin:auto;

    [/quote]
    展开全文
  • css提供了很多方便的让内容居中的方法给我们使用,以下罗列那些最长被使用的居中技巧。 居中一直是设计师们比较喜欢使用的一种摆放形式,无论是图片还是文字都会被要求放在中间,水平或者垂直。css提供了很多方便的...
  • 头部、导航条背景和尾部背景都是全屏,但内容却全部居中。还有商品展示九宫格。 想了解一下这种布局如何实现? 各位大佬能提供一下CSS参考指导嘛?[/color] [url=https://demo.opencart.cn/]演示网址[/url][/size...
  • DIV+CSS网页内容居中

    2012-11-16 23:45:24
    以下代码都是在IE8,firefox13,chrome24中运行测试的 在Web标准中的页面布局是...这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这...
  • HTML网页中table居中和表格内容居中

    万次阅读 2017-10-23 20:26:59
    HTML网页中table居中和表格内容居中 1、html中让表格在浏览器中左右居中,可以设置表格的align属性 align三个属性:居中:center;靠左:left;靠右:right。 2、在表格td中,有两个属性控制居中显示 align...
  • HTML网页中table居中和表格内容居中1、html中让表格在浏览器中左右居中,可以设置表格的align属性align三个属性:居中:center;靠左:left;靠右:right。2、在表格td中,有两个属性控制居中显示align:表示左右居中...
  • css里面让body内容居中的方法:1、使用margin设置边距“0 auto”让HTML页面中所有的元素水平居中;2、将div距离页面窗口左边框和上边框的距离设置为“50%”;3、通过jQuery实现水平和垂直居中。本教程操作环境:...
  • 如何使整个页面内容居中,如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题,下面以一个实例为大家详细介绍下在mozilla、opera和IE浏览器中均可以实现居中和高度自适应
  • 1.div的内容居中 (1)水平居中 <div align="center"><button>按钮></button></div> CSS: div{ display: block; // div默认为块级元素,如果是第三方控件或继承父类元素不是...
  • 接下来要准备的是准备一个div用来放内容了,这里为了显示特意给div设置了边框。接下来就在div中添加内容,如下图所示,运行后会发现内容偏向于左上角。给div设置水平居中,如下图所示。如何设置div里面的字居中显示...
  • 更多关于网页中表格如何居中内容请关注好文网篇一:用嵌套表格制作一个简单的网页第3章实践与练习:用嵌套表格制作一好文网为大家准备了关于WORD中如何表格居中范文,好文网里面收集了五十多篇关于好WORD中如何表格...
  • HTML 文本内容居中

    2018-12-25 18:28:00
    简单描述:使用bootstrap 的model弹出框,里边的标题内容是靠左的,想把内容居中。 操作:给标题的class加上"text-center"。 另外 我发现,在使用model的过程中,只要给div的class只加上“text-center”,该div里的...
  • 碰着过有的浏览器中网页主体内容居中的(网页居中),可有的阅读器中HTML网页整体是靠右(居右)的。标题起因在于没有配置css机关居中属性margin。html最外层DIV配置宽度同时需求设置居中CSS属性。margin:0 autoHTML...
  • 在MicroTut中有一篇很棒的文章来做http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/以CSS为中心:.className{width:300px;height:200px;position:absolute;left:50%;...
  • 其他浏览器中,text-align:center仅作用于行内内容上。解决这个问题比较好的方式,就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:Auto; margin-right:Auto”。但这个方式 IE6/IE7/IE8的混杂模式中不...
  • 网页居中

    2021-01-14 23:54:20
    网页居中 文档流布局 水平居中 text-align:center 加在父级块元素、行块元素属性中,操作行级元素 margin:auto 自身必须为块级元素 必须有宽度 padding-设置左右 设置在父级行块元素上 父级块未设置固定宽度 ...
  • 网页内容水平居中的四种方法

    千次阅读 2019-09-05 23:05:53
    网页内容水平居中的四种方法 1.使用自动外边距 div #container{ margin-left:auto; margin-right:auto; width:168px; } 评:IE6.0以下不支持,但是这是最正确、最合理的一种方法。 2.使用text-align body...
  •  设置对象的父级内容居中,这里一个页面的为父级是什么呢?我们可以想象整个页面的内容是由和这两个包含,那根据较近父级我们就设置body的CSS来实现居中问题,可以向在内容里居中有text-align:center;具体css的
  • 网页css居中

    2020-07-23 11:16:42
    元素中内容居中:"text-align:center 元素居中margin:0 auto 写在div元素中 或者margin-left:50% <div style="text-align:center"> 我是文字居中< <p>我也居中</p> <div style="display:...
  • 如何使整个页面内容居中使高度适应内容自动伸缩发布时间:2013-08-06 15:13:43 作者:佚名 我要评论如何使整个页面内容居中,如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题,下面以一个实例为大家详细...
  • HTML把内容居中怎么弄

    万次阅读 2016-06-23 17:29:14
    内容居中,这个对于萌萌哒新人来说应该是经常遇到的问题,在我刚接触前端的时候我也为此而感到烦恼。 当时就在想,为什么把一个内容放在中间就不能像Word一样点一下那么简单呢? 现在的我面对一些简单的居中已经有...
  • css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇对于新手来说DIV CSS布局居中与DIV CSS内容居中常常搞混,摸不着头脑。这里DIVCSS5重点为介绍关于布局居中与内容居中区别、CSS代码、作用、用法...
  • 如何使整个页面内容居中

    千次阅读 2013-08-05 21:49:19
    如何使整个页面内容居中,如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题。下面就给出一个实际的例子,并详细解释。 首先先按这里看实际运行效果,这个页面在mozilla、opera和IE浏览器中均可以实现居中...
  • bootstrap container的内容居中

    千次阅读 2017-02-18 15:23:23
    container 居中 container 居中 container 居中 样式 加入css.container{ text-align: center; float: none; } .mynav{ display: inline-block; }
  • 在DIV CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而1、首先介绍使用css属性让整体布局的居中:设置对象的父级内容居中,这里一个页面的为父级是什么呢?我们可以想象整个页面的内容是由和这...
  • 我想让段落的文字居中,同时让背景颜色刚好覆盖文字,请问该怎么设置?背景变短后只能靠左,无法居中。。或者说设置了背景宽度后,文字居中的效果就没有了。DOCTYPE ...
  • 同时如何让div内容居中(文本水平居中)。一、div屏幕中水平居中让DIV水平居中关键CSS代码:margin:0 automargin:0 auto设置div 上下为0,左右为自动(随div设置宽度左右间距自适应左右与左右最边相同)。实例完整代码:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,251
精华内容 25,300
关键字:

网页内容居中