`
javababy1
  • 浏览: 1224943 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

一段DIV内容垂直的代码,兼容各种浏览器

浏览器ChromeXHTMLHTML 
阅读更多

网上一般垂直居中的代码都是要设置line-height,可是很多的时候,我们是不知容器的高度的.来看一下下面的代码.

<!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>
<style>
#div1
{text-align:center;width:400px;height:300px;border:solid 1px red;
}
#div2
{
vertical-align: middle;width:0px;
height:100%;display:inline-block;
}


</style>
</head>
<body>
<div id="div1">
<span id="div2"></span>
<img src="ico_loading.gif">&nbsp;&nbsp;正在加载数据...
</div>
</body>
</html>

其原理就是利用span的display将容器撑到100%.这样后面的内容就会垂直居中.FF3,IE7,chrome下测试通过.

分享到：
| Artoolkit初级研究（文档翻译.2008.12.12 ...
评论
发表评论

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

相关推荐

    div+css布局时的浏览器兼容问题

    这段描述提示读者将要了解的内容将会帮助他们纠正一些常见的错误认识，并且能够深入了解div+css布局时可能遇到的一些兼容性问题。 #### 知识点详解 1. **DOCTYPE的影响**: - DOCTYPE是文档类型声明，不同的...

    css样式兼容不同浏览器的问题

    不同的浏览器对于CSS的支持程度各不相同，这可能导致同一段代码在不同浏览器下的显示效果存在差异。因此，在进行网站设计时，必须考虑到CSS样式在各种主流浏览器中的表现一致性，确保用户无论使用哪种浏览器都能获得...

    去浏览器滚动条代码

    根据题目中的描述以及部分给出的代码片段，我们可以看到作者提供了一段简单的CSS样式来隐藏滚动条： ```css html { overflow-x: hidden; overflow-y: hidden; } ``` 这段代码的作用是将`html`元素的水平和垂直...

    css实现div水平、垂直居中兼容chrome、ie8

    总之，实现一个DIV在浏览器中水平和垂直居中，可以通过多种CSS技术来完成，选择合适的方法取决于特定的项目需求和目标浏览器的兼容性。上述示例展示了一些基本技巧，为开发者在不同浏览器环境下进行布局居中提供了...

    CSS浏览器的兼容问题

    不同的浏览器对CSS的支持程度不同，导致同样的一段CSS代码在不同的浏览器下可能会呈现出完全不同的效果。本文将详细介绍一些常见的CSS兼容性问题及解决方案，帮助开发者更好地理解和解决这些问题。 #### 二、CSS...

    CSS样式hack，用于兼容多种浏览器

    ### CSS样式Hack详解：兼容多种浏览器的技术解析 #### 一、CSS Hack简介 CSS Hack是一种技术手段，旨在解决不同浏览器间CSS渲染差异的问题。由于各浏览器（如IE6、IE7、Firefox等）对CSS标准的支持程度不同，...

    浏览器兼容

    由于不同浏览器对Web标准的解析和实现存在差异，同一段代码在不同浏览器下的表现可能大相径庭，这直接影响了用户体验的一致性和网页的可用性。本文将深入探讨浏览器兼容性的核心概念，包括CSS兼容技巧、布局调整以及...

    div兼容问题

    在网页设计中，`div`元素是最常用的布局工具之一，但它常常伴随着各种浏览器兼容性问题。以下是一些常见的`div`兼容性问题及其解决方法： 1. **垂直居中问题**： `div`的垂直居中可以通过设置`line-height`来实现...

    CSS浏览器兼容性学习

    这段代码将使IE6显示宽度为80px，而其他浏览器和IE7以上版本显示宽度为100px。 2. *HTML 和 *+HTML Hack：这两种方法分别针对IE6和IE7。`*html`仅适用于IE6，而`*+html`是IE7特有的。 ```css #wrapper { width: ...

    DIV+CSS 兼容性 IE FF

    这段代码利用了JavaScript表达式来实现最小宽度的兼容。 ##### 7. **DIV浮动IE文本产生3像素的bug** - **问题描述**：左侧对象浮动后，右侧对象内的文本会离左侧有3px的间距。 - **解决方案**：可以在左侧对象...

    浏览器兼容性问题汇总_web前端_html_css[定义].pdf

    本资源摘要信息详细介绍了浏览器兼容性问题的解决方案，涵盖了CSS技巧、浏览器bug、DIV浮动、IE兼容性问题等多个方面。 一、 兼容性问题：CSS 技巧 1. div 的垂直居中问题：使用vertical-align:middle;将行距增加...

    代码非常简洁且兼容多浏览器的拖动层实现代码

    总结来说，这段代码展示了如何通过JavaScript实现一个兼容多浏览器的拖动层功能，利用鼠标事件和CSS定位来达到动态改变元素位置的效果。开发者可以根据实际需求对这段代码进行调整和扩展，比如增加边界检测，防止...

    div图片垂直居中 如何使div中图片垂直居中

    这段CSS代码首先将`.box`类的元素设置为`display: table-cell`，然后利用`vertical-align: middle`让内容垂直居中。`text-align: center`则确保了内部元素的水平居中。对于早期版本的Internet Explorer（主要是IE6和...

    CSS教程之div垂直居中的多种方法

    &lt;div&gt;现在我们要使这段文字垂直居中显示！&lt;/div&gt; ``` 这种方法简单有效，但需要注意，`overflow:hidden`用于避免内容超出div导致居中失效。 二、多行未知高度文本的垂直居中 对于高度可变的多行文本，我们可以...

    使用div+css开发个人网站毕业设计.doc

    此外，文档还提到了div+css在不同浏览器间的兼容性问题，例如div的垂直居中、margin加倍、IE浏览器特有的显示问题等，并给出了相应的解决策略。这提醒开发者在设计时需考虑跨浏览器兼容性，确保网站在各种环境下都能...

    经典的DIV+CSS小代码

    在网页设计领域，`DIV+CSS`是一种广泛采用的技术，用于布局和美化页面。这个压缩包包含了一系列实用的代码示例，适合初学者和有一定经验的WEB基础技术人员学习。下面，我们将逐一解析这些文件名所代表的HTML和CSS...

    CSS中让DIV居中的代码

    这段代码会使`DIV`在水平方向上居中，但要注意，只有当`DIV`的`width`被指定时，这个方法才会生效。例如： ```css #center { width: 200px; margin: 0 auto; } ``` 然而，在某些情况下，特别是涉及到IE6时，可能...

    浮动div，页面两边滚随滚动条滚动的DIV

    这段代码会在页面滚动时调整div的位置，使其始终保持在视口内。 4. **jQuery.cookie.js**：这个插件可能用于保存用户对滚动跟随的偏好。例如，用户可以选择关闭滚动跟随，然后这个设置将被保存在cookie中，以便...

    多行文字实现垂直居中

    这是一段多行文字 内容可能会很长，跨越多行 &lt;/div&gt; ``` 要实现这个功能，我们可以使用多种CSS方法，以下是几种常见的方式： ### 1. 使用Flexbox Flexbox是现代CSS布局模式，非常适合处理此类问题。将容器设置...

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