html+css 网页居中的方法
转自 袁宏 阅读次数:1085 2009/1/10 10:18
好久没动手做过网站了,今天开始做,感觉真是有点生疏。
一开始就碰到问题,我要让块级元素(div)head在body中居中,我这样定义CSS
/*body*/
body{
text-align:center;
width:760px;
}
/*head*/
#head{
margin-left:auto;
margin-right:auto;
}
然而得到的结果呢只是#head中的文字居中了,而元素本身依然静静的靠在左边,细细一想,原来错在不应该将body的width属性定义为760px;而是要将#head的width属性定义为760px;因为将body的text-align的属性定义center,它只能是约束它的下一级元素居中,如果不定义#head的宽度,只能让#head在body中保持默认大小,而body本身本没有约束它在页中的位置,所以它只能靠左边站了,找到问题原因,将CSS修改如下
/*body*/
body{
text-align:center;
}
/*head*/
#head{
width:760px;
margin-left:auto;
margin-right:auto;
}
再测试,达到预想效果,OK,搞定!
相关推荐
html5 svg+css3制作的仿加载框动画特效,在网页中间居中的转圈加载动画效果。
10 三、实现结构与表现分离 11 第六节 div+css的兼容性问题 11 一、div的垂直居中问题 11 二、margin加倍的问题 11 三、浮动ie产生的双倍距离 11 四、IE与宽度和高度的问题 11 五、页面的最小宽度 12 六、DIV浮动IE...
网页设计-页面布局篇(Css+Div),网页设计-页面布局篇(Css+Div).网页设计-页面布局篇(Css+Div).网页设计-页面布局篇(Css+Div).
本次实验目为练习 HTML+CSS 的布局与样式,以及简单的交互,制作一个可交互的照片墙,照片墙可以点击照片查看大图 照片墙是一个可以将照片按照一定的顺序排列的 Web 页面,基本要求是照片要合理的地排布在页面上,且...
设置层居中.html 设置层居中实例。 尺寸实例手把手.html 演示尺寸实例手把手。 第20章(源代码\第20章) 示例描述:本章演示外补丁用法。 margin基本语法.html 复合属性margin基本语法。 margin-...
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址: 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...
全文基于 HTML5+CSS3 完成。 实现思路: 1. 使文字可以被编辑 2. 设置背景色,居中,样式调整 3. 设置投影效果 4. 字母转大写 5. 设置自定义属性 6. 设置盒子阴影,调用自定义属性 7. 设置动画效果
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件(如:`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) HTML静态网页设计...
CSS网页布局DIV水平居中的各种方法[参考].pdf
在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面...
5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越火线游戏网 8.JS经典3款风格QQ客服在线浮动右侧与左侧...
关于div+css兼容IE和firefox的问题 好不容易建立的div+css网页完全符合W3C标准。在ie7下显示非常完美,用firefox一测试,乖乖一探糊涂 惨不忍睹。经过一番研究发现兼容很 简单。 1、增加 div {overflow: hidden;}...
DIV 居中的绝好解决方法.txt DIV+CSS制作专业信息网站的制作规范 .txt DIVCSS布局大全.pdf dom10.chm web标准化设计:常用的CSS命名规范.mht 学习网页技术CSS样式表整理的20个技巧.txt 样式表滤镜中文手册....
不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法: 一、margin:auto 0 与 text-aligh:center 在现代浏览器(如Internet Explorer 7、Firefox、Opera等)现代浏览器实现...
希望这篇文章和代码能让更多新手了解HTML DIV+CSS布局的方法和原理…该网站的主题为《去旅行吧》,整个首页下来有1800字符的代码量,当然你可以直接将首页提交作业使用但记得修改网页内的版权信息栏,也可以根据首页...
NULL 博文链接:https://onestopweb.iteye.com/blog/2323643
英文原文:http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/中文译文:http://www.12sui.cn/blog/71.html本人英语还没过四级,所以不能说是翻译把,只能说是按照自己的理解去叙述了一遍...
很多新手在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示。如果div有固定宽度的话,用padding,margin都很容易实现。方法有很多种。不过经常遇到这种div...
网页背景色与大海融为一体,这个是非常唯美的艺术效果,设置了background-position:top;背景图片在水平居中,垂直靠上的位置开始水平平辅,这两条线痕,则成了内容的左右边框