由于浏览器页面有大有小，为了适应浏览器宽度，可以让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. redis详解(包含使用场景)

    本文围绕以下几点进行阐述 1.为什么使用redis2.使用redis有什么缺点3.单线程的redis为什么这么快4.redis的数据类型,以及每种数据类型的使用场景5.redis的过期策略以及内存淘汰 ...

  2. TCPDUMP抓包学习

    一.抓包基础 1.抓网卡ens33 的包,有多大抓多大,然后保存到a.cap中 [root@localhost ~]# tcpdump -i ens33 -s -w a.cap tcpdump: li ...

  3. learning java swing 双缓冲和键盘驱动

    import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.In ...

  4. cf 799E

    $des$有 $n$ 个物品,第 $i$ 个物品的价格是 $v_i$ ,有两个人,每个人都喜欢 $n$ 个物品中的一些物品.要求选出正好 $m$ 个物品,满足选出的物品中至少有 $k$ 个物品被第一个 ...

  5. 2017.10.5 国庆清北 D5T1 拼不出的数

    题目描述 3 个元素的集合{5,1,2}的所有子集的和分别是0,1,2,3,5,6,7,8.发现最小的不能由该集合子集拼出的数字是4. 现在给你一个n个元素的集合,问你最小的不能由该集合子集拼出的数字 ...

  6. Java中的读文件，文件的创建，写文件

    前言 大家好,我是 Vic,今天给大家带来Java中的读文件,文件的创建,写文件的概述,希望你们喜欢 示意图 读文件 public static void read(String path,Strin ...

  7. Matlab中矩阵的数据结构

    在Matlab中,矩阵默认的数据类型是double, 并不是integer. 而且奇怪的是,矩阵乘法默认按照浮点数类型进行, 整数矩阵相乘会报错.另外,可以用a= int16(A)这种形式实现数据类型 ...

  8. CF1215题解

    E 假设从小到大排序,每次交换相邻两个,最小次数即冒泡排序也就是逆序对 考虑值域较小,把每个值映射到\([1,20]\) 设\(f_i\)为已经加入集合为\(i\)的值的最小逆序对个数,考虑填表法 即 ...

  9. 【CSP模拟赛】仔细的检查（树的重心&树hash）

    题目描述 nodgd家里种了一棵树,有一天nodgd比较无聊,就把这棵树画在了一张纸上.另一天nodgd更无聊,就又画了一张.  这时nodgd发现,两次画的顺序是不一样的,这就导致了原本的某一个节点 ...

  10. Azure存储简介

    注:此篇文档主要讲述微软azure全球版,并不完全试用azure中国区   azure存储是Microsoft一项托管服务,提供的云存储的可用性.安全性.持久性.可伸缩性和冗余都很高,azure存储包 ...