由于浏览器页面有大有小，为了适应浏览器宽度，可以让div总是对于浏览器居中，设置div左右两边的margin为auto可以实现这个效果。
如图，第一个是默认div，无上下左右外边距，第二个是设置了margin为auto的，拖动浏览器，改变浏览器大小，可以看到第二个div总是相对于浏览器居中。
测试代码：

<body>

<div id="body">

<div id="bodyleft" style="background-image:url(images/t1.png);width:790px;height:25px;"></div>

<div id="bodymiddle" style="background-image:url(images/t2.png);width:790px;text-align:center;">LODOP<br>内容<br>内容<br>内容<br>内容<br></div>

<div id="bodyright" style="background-image:url(images/t3.png);width:790px;height:25px;"></div>

<div id="body2">

<div id="bodyleft" style="background-image:url(images/t1.png);width:790px;height:25px;margin:auto;"></div>

<div id="bodymiddle" style="background-image:url(images/t2.png);width:790px;text-align:center;margin:auto;">LODOP<br>内容<br>内容<br>内容<br>内容<br></div>

<div id="bodyright" style="background-image:url(images/t3.png);width:790px;height:25px;margin:auto;"></div>

</div>

</body>

图示：

HTML布局排版2如何设置div总是相对于页面居中的更多相关文章

  1. HTML用table布局排版 padding清零

    之前博文:HTML布局排版2如何设置div总是相对于页面居中 中是用div进行排版的,div是切了三条,顶部的图片,下部的图片,中间的平铺条,中间的div不设高度,根据内容,该区域的大小不固定,便于后 ...

  2. HTML布局排版之制作个人网站的文章列表

    文章列表.博文列表,一般是有文章名字和时间构成的,文章名字后面是时间,点击文章的名字,可进入该文章.为了美观,一般文章名字都有一定的最大字数限制,长宽对齐,等长宽的统一格式比较美观,这种用表格来做比较 ...

  3. HTML布局排版手机上浏览的网页

    前面做个几个简单的测试html布局排版的页面,都是在浏览器上查看的,C-LODOP可通过集中打印和广域网AO打印方式,让手机等也可以打印预览和打印. 集中打印的大体方法是通过一台windows电脑作为 ...

  4. 如何设置div的宽度为100%-xx px？

    如何设置div的宽度为100%-xx px? 参见如下帖子:http://stackoverflow.com/questions/15183069/div-width-100-10px-relativ ...

  5. 如何设置DIV水平、垂直居中

    一.水平居中 需要设置两点: 1  设置DIV 的width属性即宽度. 2  设置div的margin-left和margin-right属性即可 代码: <div style="w ...

  6. jquery设置div,文本框 表单的值示例

    我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML标记)val() - 设置或返回表单字段的值 1 ...

  7. 设置DIV隐藏与显示，表格滑动条

    问题描述:         现在希望使用JS设置DIV块的显示与隐藏,当某一个事件触发是,自动显示DIV块,显示表格数据,但是要求表格显示滑动条 问题解决:   (1)DIV块的隐藏与显示 如上所示, ...

  8. 个人经验 - Android的RelativeLayout布局的layout_height属性设置为wrap_content时的坑

    Android的RelativeLayout布局的layout_height属性设置为wrap_content时的坑: 此坑出现的条件: 1.RelativeLayout布局的layout_heigh ...

  9. 设置Div多行文本超出时，以省略号代替

    这个文章不错 http://www.css88.com/archives/5206 css中有一个属性: text-overflow,可以设置文本超出指定长度后的文本截取样式. 下面是从 w3shco ...

随机推荐

  1. [Schematics] 1. Copy and Manipulate Template

    1. Create a src/my-component/files/src/app directory to hold your templates. mkdir -p src/my-compone ...

  2. PostgreSQL 分区索引演进

    PostgreSQL 分区表,操作性相当便捷. 但只能在创建时决定是否为分区表,并决定分区条件字段,普通表创建后,不能在修改为分区表. Note:通过其他方法也可转化为分区表. 和其他数据库一样,分区 ...

  3. java大文件分块上传断点续传demo

    第一点:Java代码实现文件上传 FormFile file = manform.getFile(); String newfileName = null; String newpathname =  ...

  4. 初识QuartusII 9.0（破解，半加器的仿真，综合：下）

    完成波形的随机设置(A,B任意给定高低电平即可,只是当作测试信号),选择任务栏Assignments[Setings],设置Simulation mode为functional,其余保持不变点击ok. ...

  5. codevs：2849 素数判定 3：输入一个正整数x（3<=x<=100000），判断x是否是质数，如果是质数则输出信息“prime”，否则输出“composite”。

    #include<iostream>#include<cstdio>#include<cmath>using namespace std;int a[2];int ...

  6. 洛谷P3964松鼠聚会

    题目 题意:求最小的从某一个点到其余点的切比雪夫距离和. 将一个图中的\((x,y)\)坐标转到新坐标\((x+y,x-y)\)后,图中的曼哈顿距离就是新图中的切比雪夫距离, 证明:分类讨论, 1.\ ...

  7. word 插入表格，位置不在最左边

    首先想到的是 样式的问题.

  8. Java 中HashTable、HashMap、TreeMap三者区别，以及自定义对象是否相同比较，自定义排序等

    /* Map集合:该集合存储键值对.一对一对往里存.而且要保证键的唯一性. Map |--Hashtable:底层是哈希表数据结构,不可以存入null键null值.该集合是线程同步的.效率低.基本已废 ...

  9. [WEB安全]伪造IP地址进行爆破的BurpSuite插件:BurpFakeIP

    0x01 简介 一个用于伪造ip地址进行爆破的BurpSuite插件,burpsuite伪造ip可用于突破waf及进行安全规则绕过等场景. 0x02 功能 伪造指定ip 伪造本地ip 伪造随机ip 随 ...

  10. Git的使用(1) —— 版本库

    1. 简介 Git作为一个分布式版本控制系统,其优点是不需要一直连接远端版本库就可以使用. 故其为实现分布版本控制专门设计了一整套的存储区间和语句,用来实现. (1) 本地版本库:建立在本机磁盘上的文 ...