使用position和负值空白边让div居中
2010-01-24 14:48:09 来源:心蕊设计 浏览:489次
<script type="text/javascript"></script>
在前面的课程中,心蕊网页CSS实现div层居中。今天再给大家讲解一种使用position和负值空白边让div居中的方法。设计给大家讲解过
首先定义容器的宽度,然后将容器的position属性设置为relative,left属性设置为50%,就会把容器的左边缘定位在页面的中间。
#box{ width:720px; position:relative; left:50%; }
|
这样是让容器的左边缘居中,我们希望让容器的中间居中。实现方法是对容器的左边应用一个负值的空白边,宽度等于容器宽度的一半。这样会把容器向左移动它的宽度一半,从而让它在屏幕上居中。
#box{ width:720px; position:relative; left:50%; margin-left:-360px; }
|
分享到:
相关推荐
<td>body c</td> <br> <td>body d</td> <br> </tr> <br> <tr> <br> <td>body a</td> <br> <td>body b</td> <br> </tr> <br> <tr> <br> <td>body c</td> <br> <td>body d</td> <br> </tr> <br> <tr> <br> <td>body a...
<div>不定宽块元素</div> </td> </tr> </tbody> </table> ``` css代码: ``` table { margin: 0 auto; } ``` 这将使得块元素水平居中。 2. 转换为行元素 css代码: ``` .block { display: inline-block; ...
<div id="div1"></div> 效果如下: 层模型--相对定位 如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。...
DTD子集 <br>5.5.3 有条件地忽略外部DTD子集<br> 的一部分 <br>5.6 把格式正确的文档转换为有效文档 <br>第6章 定义和使用实体 <br>6.1 实体定义和分类 <br>6.2 声明通用实体 <br>6.2.1 声明内部通用可分析型实体 ...
title="Link 1"><span>Link 1</span></a></li><br><li><a href="#" title="Link 2"><span>Link 2</span></a></li><br>...<br></ul><br></div><br><br>效果页面,css和html写得很清楚。<br>下载html打包文件<br>
</position-LL1> </offsetLL> </pos> <accuracy> <pos><a200m/></pos> </accuracy> <speed>80</speed> <heading>90</heading> <size> <width>100</width> <vehicleLength>110</vehicleLength> </size> ...
charset=gb2312" /><br><title>test</title><br></head><br><body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"><br><table height=1000><br><tr><td>dddd</td></tr><br></table><br></body><br...
控件使用<br>1、鼠标经过行的时候改变该行的样式,鼠标离开行的时候恢复该行的样式<br>使用方法(设置属性): <br>MouseOverCssClass - 鼠标经过行时行的 CSS 类名<br><br>2、对多个字段进行复合排序;升序、降序的...
1,01.zip<br>Toolbar - Custom status messages and tooltips<br>用户状态信息与工具提示(3KB)<END><br>2,02.zip<br>Remove system menu from floating toolbar<br>从浮动工具条中去除系统菜单(2KB)<END><br>3,03....
1,01.zip<br>MFC Extension Library<br>MFC扩展界面库, 使用Visual C++ 6.0(15KB)<END><br>2,02.zip<br>Visual Studio style UI<br>Visual Studio风格的界面效果(15KB)<END><br>3,03.zip<br>Internet Explorer 4 ...
在 prototype.js中定义的新对象和类 12<br>4.9. PeriodicalExecuter 对象 13<br>4.10. Prototype 对象 13<br>4.11. Class 对象 13<br>4.12. Ajax 对象 14<br>4.13. Ajax.Base 类 14<br>4.14. Ajax.Request 类 14<br...
<br> }<br> </script><br> </head><br> <br> <body><br> <div id=cpst style="display:none"><br> <br> <iframe src="image/cpst.jpg" <br>style="position:absolute; visibility:inherit; top:0px; left:0px; ...
17<br>1.4.4 URL和URI 18<br>1.4.5 XLink和XPointer 18<br>1.4.6 Unicode字符集... 19<br>1.4.7 如何将这些技术融合在一起... 19<br>1.5 本章小结... 20<br>第2章 XML应用简介... 21<br>2.1 什么是XML应用程序... ...
<head>...高度自动增加,应该不错吧^_^<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <s> <i></i> </s> </div> <br /> </body> </html>
(2KB)<END><br>28,listfind.zip<br>This sample shows how to use the CList<> template. (9KB)<END><br>29,ndbrow.zip<br>This Visual C++ 6 project shows how to create an MDI application that hosts ...
blog风格单元和分类的 META KEY, DESCRIPTION 生成问题:<br>把当前页面所有文章的META KEY, DESCRIPTION都累加起来,造成长度过长、关键词重复和描述难阅读等缺陷<br><br><br><br>二、增强功能<br><br>1....
button 4 up<br> 0100h = button 5 down<br> 0200h = button 5 up<br> 0400h = mouse wheel<br>6 2 Mouse wheel data<br>8 4 Not used<br>12 4 X position<br>16 4 Y position<br>20 4 Device specific ...
<br><br> // If this is a size or a move, update the position in the user's options<br><br> if (uMsg == WM_SIZE || uMsg == WM_MOVE)<br> {<br> // We don't want to start recording the window pos until we...
打印三联收据的代码,,,,<div style="position:relative"> <table border="1" width="627" id="table1" style="position:absolute; left:5%;" > <colgroup> <col style="width: 80px;" /> <col /> </...
drvtype.zip<br>Determine Drive Type<END><br>47,findcd1.zip<br>Find the First CD-ROM<END><br>48,xxsShell32.zip<br>Shell32 functions and subs wrapper for VB developers.<END><br>49,api2.zip<br>This ...