由于浏览器页面有大有小，为了适应浏览器宽度，可以让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. C# 异步编程（async&await）

    同步:同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去 异步:异步是指进程不需要一直等下去,而是继续执行下面的操作 ...

  2. PHP Socket 编程之9个主要函数的使用之测试案例

    php的socket编程算是比较难以理解的东西吧,不过,我们只要理解socket几个函数之间的关系,以及它们所扮演的角色,那么理解起来应该不是很难了,在笔者看来,socket编程,其实就是建立一个网络 ...

  3. C结构体struct 和 共用体union的使用测试

    #include <stdio.h> struct { char name[10]; char sex; char job; int num; union{ //联合只能共用同一个内存 i ...

  4. Cogs 876. 游戏(DP)

    游戏 ★ 输入文件:game1.in 输出文件:game1.out 简单对比 时间限制:1 s 内存限制:128 MB USACO/game1 A Game游戏 译 by 肖遥 描述 有如下一个双人游 ...

  5. AttributeError: module 'tensorflow' has no attribute 'set_random_seed'

    anaconda3 python3.7 安装好tensorflow 后出现上面的问题,原因是安装的tensorflow版本是2.0的,所以使用以前的代码tensorflow中的函数不兼容.

  6. 《挑战30天C++入门极限》C++运算符重载转换运算符

        C++运算符重载转换运算符 为什么需要转换运算符? 大家知道对于内置类型的数据我们可以通过强制转换符的使用来转换数据,例如(int)2.1f;自定义类也是类型,那么自定义类的对象在很多情况下也 ...

  7. Java GUI：将JPanel添加进JScrollPane

    实现的目标: 因为在滚动框中含有很多个Java GUI 组件,因此这里采用JPanel面板包住这些组件,在用JScrollPane实现滚动 问题1:布局揉在一起 JPanel有自己默认的布局方式,因此 ...

  8. C仿黑白棋版XO棋

    两位玩家轮流在棋盘上放置不同颜色的棋子,一位玩家使用黑子,另一位使用白子,棋盘是一个偶数正方形. 只能将一个棋子放在对手的棋子旁边,使对手在水平.垂直.对角线方向上的棋子变成自己的棋子,游戏结束时,棋 ...

  9. What is content-type and datatype in an AJAX request?

    https://api.jquery.com/jquery.ajax/ What is content-type and datatype in an AJAX request? contentTyp ...

  10. Linux下用jar命令替换war包中的文件【转】

    问题背景:在Linux环境上的weblogic发布war包,有时候只是修改了几个文件,也要上传整个war包,这样很费时间,因此整理了一下Linux环境,更新单个文件的方法. 1.如果要替换的文件直接在 ...