让div在Firefox中居中对齐

wang15072732418 2010-06-11 04:53:09



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" >

<head><title>

	无标题页

</title></head>

<body style="font-size:12px;">

    <form name="form1" method="post" action="Login.aspx" id="form1">

    <div id="login" style="height:600px;width:917px;margin:0 auto;background:#000000">

         <div style="margin-left:270px; margin-top:265px;width:200px; height:85px;background:#ffffff"">

           <div style="float:left">

               <div style=" height:30px; width:148px">  

                   <input name="txtname" type="text" id="txtname" style="border-color:#999999;border-width:1px;border-style:Solid;height:22px;width:138px;" />

               </div>

               <div style="height:30px; width:148px; margin-top:6px">  

                   <input name="txtpwd" type="password" id="txtpwd" style="border-color:#999999;border-width:1px;border-style:Solid;height:22px;" />

               </div>



          </div>

          <div style="width:80px; height:80px">

              <input type="image" name="ImageButton1" id="ImageButton1" src="images/login_btn.jpg" style="border-width:0px;" />

             </div>

             <span id="lblmessage"></span></div>  

    </div>

    </form>

</body>

</html>

...全文

180 12 打赏收藏转发到动态举报

写回复

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

Lovemartyr 2010-06-11

打赏
举报

回复

body外加<center></center>

wang15072732418 2010-06-11

打赏
举报

回复

奇怪了，IE8和Firefox显示一样，IE6显示不同。IE6与IE8有什么大的区别吗？

wang15072732418 2010-06-11

打赏
举报

回复

我下载IE8看下

丰云 2010-06-11

打赏
举报

回复

IE6 !!!

丰云 2010-06-11

打赏
举报

回复

IE: 8.0.6001.18702
FF: 3.5.7

wang15072732418 2010-06-11

打赏
举报

回复

我IE6/Firefox3.63看到的效果不一样

wang15072732418 2010-06-11

打赏
举报

回复

[Quote=引用 5 楼 foren_whb 的回复:]
我在IE/FIREFOX里面看到的结果是一样的
[/Quote]
你用的IE/Firefox都是什么版本的呀

丰云 2010-06-11

打赏
举报

回复

我在IE/FIREFOX里面看到的结果是一样的

zjtpiaoxue 2010-06-11

打赏
举报

回复

(1)给div 的父容器加text-algin:center;
(2)给div 加 margin-left:auto;margin-right:auto;

wang15072732418 2010-06-11

打赏
举报

回复

[Quote=引用 2 楼 foren_whb 的回复:]
DIV里面的内容居中对齐 ?? OR DIV自身居中队齐 ??
[/Quote]
你在IE中看到的效果就是我想要的。

丰云 2010-06-11

打赏
举报

回复

DIV里面的内容居中对齐 ?? OR DIV自身居中队齐 ??

wang15072732418 2010-06-11

打赏
举报

回复

IE中没问题，用Firefox打开就变形了

比如： <div> <div> div> div> 想让子div在父div中水平居中对齐，如果在css中写 div { text-align: center; }的话在ie中浏览没有问题，但在firefox中依然左对齐。所以必须再加一个样式 div div { margin-left:auto; margin-right:auto; }这样在ie，ff都能对齐。我猜想是ff中如果你不设置margin，默认为0；而margin的优先级又高于text-align。不知道大家有什么猜想。请分享。

ie 火狐兼容而谷歌浏览器不兼容，div水平对齐的解决方式，仅供参考

针对学员疑问“div垂直居中？”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程，课程包含两方面：1、文本垂直居中的解决方案；2、块级元素垂直居中的解决方案。

div+css有实例,易学易懂第1 章 Web 标准布局的本质第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准的前景第 2 章 XHTML 书写规范第14 页 2.1 为什么要使用XHTML 2.2 什么是XHTML 2.3 XHTML 语法基础 2.3.1 XHTML 页面结构 2.3.2 元素的书写格式和属性 2.3.3 各种元素的属性 2.4 XHTML 代码规范第 3 章 CSS 基础与书写规范第29 页 3.1 CSS 的基础知识 3.1.1 什么是CSS 3.1.2 CSS 的语法 3.1.3 选择符 3.1.4 属性 3.1.5 伪类和伪元素 3.1.6 默认值 3.1.7 继承性 3.2 CSS 编码规范 3.2.1 CSS 基本书写规范 3.2.2 CSS 样式表书写顺序 3.3 怎样更好地应用CSS 3.3.1 块元素和内联元素 3.3.2 一些CSS 的实用技巧 3.3.3 怎样调试CSS 3.4 关于CSS 的学习第4 章网页头部元素的详细定义第41 页 4.1 DOCTYPE 的选择 4.1.1 什么是DOCTYPE 4.1.2 选择什么样的DOCTYPE 4.2 名字空间 4.3 编码问题 4.4 meta 标签 4.5 CSS 的调用 4.5.1 调用样式表的几种方法 4.5.2 应用样式的优先级 4.6 网页头部实例第 5 章 CSS 基本布局属性第50 页 5.1 页面的制作流程和整体分析 5.2 元素定位基础知识 5.2.1 块元素的默认排列 5.2.2 内联元素的默认排列 5.2.3 块元素和内联元素的混合默认排列 5.2.4 使用浮动属性进行定位 5.3 定位属性详解 5.3.1 定位模式 5.3.2 边偏移 5.3.3 层叠定位属性 5.4 定位属性的应用 5.4.1 页面的制作流程和整体分析 5.4.2 相对定位 5.4.3 固定定位 5.4.4 层叠定位属性的使用 5.5 页面的背景设定 5.5.1 使用背景色定义背景 5.5.2 背景图片默认使用 5.5.3 背景图片的重复 5.5.4 背景图片的位置 5.5.5 背景图片的附件 5.6 背景的综合应用 5.6.1 背景的综合应用 5.6.2 背景颜色和背景图片的层叠 5.6.3 背景属性在内联元素中的使用 5.6.4 背景属性的缩写 5.6.5 页面文本的样式 5.6.6 链接的样式 5.7 布局的基础 5.7.1 布局页面的步骤 5.7.2 使用ID 还是Class 5.7.3 控制内容显示的display 属性 5.7.4 控制内容显示的visibility 属性 5.7.5 使用text-align 属性的水平居中 5.7.6 使用margin 属性的水平居中 5.8 浮动属性 5.8.1 浮动属性详解 5.8.2 相邻的浮动元素和固定元素 5.8.3 相邻的两个浮动元素 5.8.4 相邻的多个浮动元素 5.9 关于ul 和li 的样式详解 5.9.1 使用list-style-type 属 5.9.2 使用list-style-position 属性 5.9.3 使用list-style-image 属性 5.9.4 list-style 属性 5.10 菜单原理 5.10.1 菜单原理 5.10.2 制作菜单内容和结构部分 5.10.3 CSS 代码编写 5.11 一个横向导航菜单的制作 5.11.1 菜单原理 5.11.2 制作菜单内容和结构部分 5.11.3 CSS 代码编写 5.12 清除浮动 5.12.1 清除浮动属性详解 5.12.2 清除浮动属性的使用第6 章 CSS 定义文本属性第123 页 6.1 文本的缩进和对齐 6.1.1 段首缩进 6.1.2 段首字符下沉与大写 6.1.3 文本的对齐 6.1.4 图文混排 6.2 行高与间隔 6.2.1 行高属性详解 6.2.2 利用行高属性使文本垂直居中 6.2.3 间隔与空白 6.2.4 文本的转换 6.3 水平和垂直居中问题 6.3.1 已知容器和内容大小的水平和垂直居中问题 6.3.2 未知容器的大小而已知内容大小的水平和垂直居中问题 6.3.3 已知容器的大小而未知内容大小的水平和垂直居中问题 6.3.4 容器的大小和内容大小均未知的水平和垂直居中 6.3.5 修饰图片的水平和垂直居中 6.4 字体的综合属性 6.4.1 字体的选择 6.4.2 字体的大小 6.4.3 字体的加粗 6.4.4 字体的样式 6.4.5 字体的变形 6.4.6 字体属性的简写 6.5 文本的修饰和链接 6.5.1 文本的修饰 6.5.2 链接属性详解 6.5.3 使用链接的顺序 6.5.4 链接的继承性 6.5.5 cursor 属性第7 章 CSS 容器属性 7.1 什么是盒模型 7.1.1 内容与盒模型 7.1.2 背景与盒模型 7.2 补白属性 7.2.1 补白属性详解 7.2.2 百分比值的使用 7.2.3 单侧的补白属性 7.2.4 补白属性的简写 7.3 边框属性 7.3.1 边框样式 7.3.2 边框宽度 7.3.3 边框颜色 7.3.4 边框的综合定义 7.3.5 单侧边框的综合定义 7.3.6 一个有用的表格边框属性 7.3.7 应用边框属性的实例 7.4 边界属性 7.4.1 边界属性 7.4.2 单侧的边界和简写 7.4.3 垂直方向的边界重叠 7.4.4 水平方向的边界 7.4.5 负的边界值 7.4.6 在内联元素中使用边界属性第8 章浏览器及兼容问题 8.1 浏览器介绍 8.2 要兼容哪些浏览器 8.3 解决兼容问题的原理 8.4 !important 的使用 8.5 水平居中的问题 8.5.1 IE6.0 中的水平居中 8.5.2 FIREFOX2.0 中的水平居中 8.5.3 解决方法 8.6 非浮动内容和容器的问题 8.6.1 IE6.0 中固定宽度和高度的容器和内容 8.6.2 FIREFOX2.0 中的容器与内容 8.6.3 可能出现的问题和解决方法 8.7 使用:after 伪类解决浮动的问题 8.7.1 IE6.0 中的浮动元素和容器 8.7.2 FIREFOX2.0 中的浮动元素和容器 8.7.3 并列浮动元素默认宽度的问题 8.8 嵌套元素宽度和高度叠中的问题 8.8.1 父元素和子元素均没有定义宽度和高度 8.8.2 定义子元素的宽度后的效果 8.8.3 定义父元素宽度后的效果 8.8.4 解决的方法 8.9 子元素负边界的问题 8.9.1 IE6.0 中子元素的负边界 8.9.2 FIREFOX2.0 中子元素的负边界 8.9.3 解决方法 8.10 列表的默认显示问题 8.10.1 列表的默认显示方式 8.10.2 默认属性的取消 8.11 IE6.0 中的问题 8.11.1 浮动元素的双边距和零边距问题 8.11.2 浮动列表的问题 8.11.3 图片的间隙问题 8.12 IE7.0 中的问题 8.12.1 内容和容器的显示方式不同 8.12.2 支持!important 的声明 8.12.3 嵌套的问题 8.12.4 浮动子元素的问题 8.12.5 和IE6.0 相同的问题 8.13 兼容问题实例 8.13.1 纵向导航菜单的兼容 8.13.2 横向导航菜单的兼容 8.13.3 自适应高度的兼容 8.13.4 实例制作中的兼容问题第9 章一个英文网站的制作 9.1 分析效果图 9.2 切图 9.2.1 制作首页的切图 9.2.2 二级页面的切图 9.3 制作站点首页头部 9.3.1 首页头部的信息和基础样式的制作 9.3.2 首页头部的分析 9.3.3 首页头部结构的制作 9.3.4 首页头部CSS 代码的编写 9.4 制作首页的主体部分 9.4.1 分析主体部分效果图 9.4.2 制作主体左侧部分的结构 9.4.3 制作主体左侧部分的样式 9.4.4 制作主体中间部分的结构 9.4.5 制作主体中间部分的样式 9.4.6 制作主体右侧部分的结构 9.4.7 制作主体右侧部分的样式 9.5 制作首页的底部 9.6 首页的兼容问题 9.7 二级页面的制作 9.7.1 分析二级页面的效果图 9.7.2 制作二级页面中间内容部分的结构 9.7.3 制作二级页面中间内容部分的样式 9.7.4 制作二级页面右侧部分的结构 9.7.5 制作二级页面右侧部分的样式

1. HTML对象获取问题 3 2. const问题 3 3. event.x与event.y问题 3 4. window.location.href问题 3 5. frame问题 3 6. 模态和非模态窗口问题 3 7. firefox与IE的父元素(parentElement)的区别 3 8. document.formName.item(”itemName”) 问题 3 9. 集合类对象问题 3 10. 自定义属性问题 3 11. input.type属性问题 3 12. event.srcElement问题 3 13. body载入问题 3 14. 事件委托方法 3 15. Table操作问题 3 16. 对象宽高赋值问题 3 Ø CSS 3 1. cursor:hand VS cursor:pointer 3 2. innerText在IE中能正常工作，但在FireFox中却不行. 3 3. CSS透明 3 4. css中的width和padding 3 5. FF和IE BOX模型解释不一致导致相差2px 3 6. IE5 和IE6的BOX解释不一致 3 7. ul和ol列表缩进问题 3 8. 元素水平居中问题 3 9. Div的垂直居中问题 3 10. margin加倍的问题 3 11. IE与宽度和高度的问题 3 12. 页面的最小宽度 3 13. DIV浮动IE文本产生3象素的bug 3 14. IE捉迷藏的问题 3 15. float的div闭合;清除浮动;自适应高度 3 16. 高度不适应 3 17. IE6下图片下有空隙产生 3 18. 对齐文本与文本输入框 3 19. LI中内容超过长度后以省略号显示 3 20. 为什么web标准中IE无法设置滚动条颜色了 3 21. 为什么无法定义1px左右高度的容器 3 22. 链接(a标签)的边框与背景 3 23. 超链接访问过后hover样式就不出现的问题 3 24. FORM标签 3 25. 属性选择器(这个不能算是兼容,是隐藏css的一个bug) 3 26. 为什么FF下文本无法撑开容器的高度 3

62,041

社区成员

669,051

社区内容

发帖

与我相关

我的任务

javascript云原生企业社区

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章