`
jordan_micle
  • 浏览: 245699 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

兼容多浏览器的居中Compatible Center

浏览器ChromeCSSIEC 
阅读更多

方法1：
body下的div需要居中。
CSS样式： 

<style>
/* body设置属性text-align为center */  
body {text-align:center;}  

/* id="c"的div设置属性margin为auto */  
div#c {margin:auto;}
</style>
 

HTML代码： 

<body>  
    <div id="c">这是要居中的DIV</div>  
</body>

 

总结：

在IE下text-align:center是实现居中的关键，但在FF或chrome下失效，所以要使内元素居中，则内元素需设置属性margin:auto。

 

// 2010-01-12

 

DOCTYPE:

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

假如body设置了CSS样式，text-align:center

那么body下的所有元素（包括直接属下和间接属下元素）都会居中。

 

 

 

 

 

分享到：
| FTP进行上传下载文件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    解决IE6、IE7、IE8样式不兼容问题

    IE6、IE7对于文本居中(`text-align: center`)的处理与其他浏览器存在差异。为了解决这一问题，可以通过设置元素的`margin-right`和`margin-left`为`auto`来实现居中效果： ```css #center { margin-right: auto; ...

    div错位解决IE6IE7IE8样式不兼容问题

    ### div错位解决IE6/IE7/IE8样式不兼容问题 ...随着现代浏览器的发展，越来越多的新特性被引入，因此在开发新项目时，建议优先考虑现代浏览器的兼容性，而对于旧版IE的支持则可以根据实际情况灵活处理。

    div错位解决IE6、IE7、IE8样式不兼容问题IE6里DIV错位的问题.doc

    在Web开发中，浏览器兼容性一直是一个重要的考虑因素。不同的浏览器（尤其是早期版本的Internet Explorer）对CSS的支持程度不一，导致同一段代码在不同浏览器下的渲染效果可能大相径庭。本文档主要关注在IE6、IE7、...

    IE678个人总结的式样问题

    根据提供的信息，我们可以总结出以下IT知识要点，主要聚焦于IE6、IE7与IE8浏览器中的样式兼容性问题及解决方案： ### 一、IE6/IE7/IE8 浏览器兼容性概述 #### 1. **文档声明与X-UA-Compatible** - 在网页头部加入...

    css实现元素水平垂直居中常见的两种方式实例详解

    在CSS布局设计中，使元素水平垂直居中是一...选择哪种方法取决于项目需求和目标浏览器的兼容性。了解并熟练掌握这些技巧，将有助于提升网页布局设计的能力。如果你在实践中遇到任何问题，欢迎进行进一步的探讨和交流。

    HTML+CSS实现单列布局水平居中布局

    这种方法的优点是兼容性良好，适用于大多数现代浏览器。但是，它也有一些不足，比如需要同时修改父元素和子元素的样式，且子元素之间可能会有不必要的空白间隙（由于inline-block元素之间的空格），可以通过去除空格...

    创建一个基本的圣诞树网页.docx

    3. `justify-content: center`和`align-items: center`：将内容在水平和垂直方向上居中。 4. `height: 100vh`：设置元素高度为视口高度，使得圣诞树始终占据屏幕的全部高度。 5. `position: relative`：设置元素相对...

    圣诞树html网页代码.docx

    接着，`&lt;head&gt;`标签包含了元数据，如字符编码（`&lt;meta charset="UTF-8"&gt;`）、浏览器兼容性（`&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;`）和视口设置（`, initial-scale=1.0"&gt;`），确保在不同设备上...

    学生个人html静态网页制作 湖南美食(4页) 家乡美食网站设计与实现

    - **IE浏览器兼容性设置**: `&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;` 确保 Internet Explorer 浏览器以最新版本的渲染引擎显示页面。 #### 3. CSS样式表的应用 - **外部样式表链接**: 通过 `...

    兄弟连学员珍藏笔记

    `，针对IE8的兼容性问题，可以在`&lt;head&gt;`中添加`&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"&gt;`。 2. **页面居中**：使用`margin: 0 auto;`可以使网站整体居中，若出现抖动，可设置`...

    2019前端校招总结

    - **兼容模式**: `&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;` 指示Internet Explorer使用其最新的渲染引擎。 - **视口设置**: `, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-...

    一些前端面试题.pdf

    - `&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;`告诉IE浏览器使用最新的渲染引擎渲染页面。 #### CSS 6. **如何用CSS创建一个响应式布局？** - 使用媒体查询（`@media`）根据不同的设备宽度应用不同...

    javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)

    - **事件绑定方法**：定义了`bindEvent`方法，用于跨浏览器兼容性地绑定事件。 - **拖拽逻辑**： - 使用`mousedown`事件来判断是否开始拖拽。 - 通过`mousemove`事件更新拖拽元素的位置。 - 利用`mouseup`事件...

Magicbox
Global site tag (gtag.js) - Google Analytics