由于浏览器页面有大有小，为了适应浏览器宽度，可以让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. (转载) 从0开始搭建SQL Server AlwaysOn 第三篇（配置AlwaysOn）

    这一篇是从0开始搭建SQL Server AlwaysOn 的第三篇,这一篇才真正开始搭建AlwaysOn,前两篇是为搭建AlwaysOn 做准备的 步骤 这一篇依然使用step by step的方式 ...

  2. Java基础学习【字符串倒序输出+排序】

    字符串逆序输出 import java.util.*; public class Main{ public static void main(String [] args) { //字符串逆序输出 S ...

  3. 012——软件安装之_matlab2019安装

    (一)参考文献:https://www.isharepc.com/14196.html (二)下载地址: 链接:https://pan.baidu.com/s/1gq06TuBWGr1Qc4owpRX ...

  4. Kubernetes 学习19基于canel的网络策略

    一.概述 1.我们说过,k8s的可用插件有很多,除了flannel之外,还有一个流行的叫做calico的组件,不过calico在很多项目中都会有这个名字被应用,所以他们把自己称为project cal ...

  5. 自用java购物

    @RequestMapping("listgoodscart") public ResultEntity listGoodsCart(@RequestParam(name = &q ...

  6. PDB符号文件

    一.什么是PDB文件 PDB(Program DataBase),全称为“程序数据库”文件.存储程序的所有调试信息数据.在编译连接时,如果选择了/debug选项或/debug:full选项,则最新的M ...

  7. 玩好JDK[转]

    ref: https://www.cnblogs.com/zuoxiaolong/p/life53.html java-reference:https://docs.oracle.com/en/jav ...

  8. Poj 1743 Musical Theme(后缀数组+二分答案)

    Musical Theme Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 28435 Accepted: 9604 Descri ...

  9. python 路径引用问题

    文件结构 入口文件· 将当前文件的父级,加入搜索目录里面 import sys import os current_dir = os.path.abspath(os.path.dirname(__fi ...

  10. 洛谷P1288取数游戏2

    题目 博弈论. 考虑先手和后手的关系.然后可以通过统计数值不是0的数的个数来得出答案. \(Code\) #include <bits/stdc++.h> using namespace ...