<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
#con_div{
width:400px;
height:300px;
border:1px solid #777;
text-align:center;
}
/*FOR IE*/
.fixie{
width:0;
height:100%;
display:inline-block;<!--见下文对Display的说明-->
vertical-align:middle;
}
-->
</style>
<body>
<div id="con_div">
<span class="fixie"></span><!--这里用DIV和Span来控制文字内容的水平和垂直居中-->
teststsetsetsetdisplay:inline-block;
</div>
</body>
</html>
display:block就是将元素显示为块级元素.
block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
display:inline就是将元素显示为行内元素.
inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：
让一个inline元素从新行开始；
让块元素和其他元素保持在一行上；
控制inline元素的宽度（对导航条特别有用）；
控制inline元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的背景色。
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
inline-block的元素特点：
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)
并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。
IE下块元素如何实现display:inline-block的效果？
有两种方法：
1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：
div {display:inline; zoom:1;...}
以下用个例子来说明三者的区别和用
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>display:inline、block、inline-block的区别</title>
</head>
<style>
div,span{background-color:green;margin:5px;border:1px solid #333;padding:5px;height:52px;color:#fff;}
.b{display:block;}
.i{display:inline;}
div.ib{display:inline-block;}
div.ib{display:inline;}
a.ib{display:inline-block;}
a.ib{display:block;}
span.v{padding:0;margin:0;border:0;vertical-align:middle;height:100%}
</style>
<body>
<div>div display:block</div>
<div class="i">div display:inline</div>
<div class="ib">div display:inline-block</div>
<span>span display:inline</span>
<span class="b">span display:block</span>
<span><a class="ib">a display:block</a></span><br />
<div><span class="v"></span>vertical-align:middle</div>
</body>
</html>
分享到：
相关推荐
`属性可以轻松地将文本内容在div内居中对齐。例如： ```css .container { text-align: center; } ``` 2. **多行文本水平居中**： 对于多行文本，`display: flex;`和`justify-content: center;`组合可以实现...
在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
`display: inline-block`属性允许一个元素表现得像一个内联元素（即不换行显示），同时又具有块级元素（如div）的特性，如设置宽度、高度等。这种特性使得`inline-block`成为居中对齐的一种实用方法，尤其是当元素...
例如，可以设置div的宽度、高度、内边距、外边距等属性，实现内容的分栏、居中对齐、响应式布局等效果。 三、CSS布局模式 1. 流动布局（Block Layout）：默认的块级元素布局，元素按行显示，每一行只显示一个块级...
标题：“css+div在IE中兼容” 描述：“css+div解决在IE中的兼容问题，可以用于参考。” 在探讨“css+div在IE中兼容”的问题时，我们面临着一个历史遗留下来的挑战：Internet Explorer（以下简称IE）浏览器由于其...
### div+css兼容多种浏览器的方法详解 随着互联网技术的发展，前端开发中经常遇到的一个问题是不同浏览器之间的兼容性差异。本文将详细介绍如何使基于div+css布局的网页在Internet Explorer（IE6, IE7, IE8, IE9）...
在网页设计中，让元素在页面上垂直和水平居中是一项常见的需求，特别是在CSS2.1规范中。本文将深入探讨如何使用CSS2.1来实现这一目标，无论是对于已知宽高还是未知宽高的块级元素（div）。首先，我们需要理解CSS布局...
布局方面，CSS的`display`属性控制元素如何显示，如设置为`block`（块级元素，如`<div>`）、`inline`（内联元素，如`<span>`）或`none`（隐藏元素）。`float`属性用于让元素浮动，常见值有`left`、`right`和`none`，...
3. 如果希望a标签内的内容具有样式，可以设置`display: block`。 4. FF和IE对盒模型的理解差异可能导致2px的偏差，以及浮动元素的margin加倍问题。可以通过统一盒模型或者使用`display: inline-block`来解决。 5. ul...
### CSS+DIV兼容方法详解 在网页设计领域，CSS（层叠样式表）与HTML的div元素结合使用，成为创建动态、响应式网页布局的主要工具。然而，由于不同浏览器对CSS的支持程度存在差异，实现跨浏览器兼容性成为前端开发者...
想必写 css 的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？ </div> ``` 在这个示例中，`class="my"`的`<div>`通过以下CSS样式实现了...
### Div+CSS布局居中的实现方法 在网页设计与开发过程中，经常遇到的一个问题是如何让一个元素（如图片、文本块或容器等）在页面上水平居中显示。特别是当涉及到跨浏览器兼容性时，这一问题变得更加复杂。本文将...
3. 为`a`标签设置`display: block`可以使内容块化，便于应用样式。 4. IE6中，浮动的`div`的`margin`可能会加倍，这需要特别处理。 5. `ul`在Firefox中有默认的`list-style`和`padding`，应先清除以避免问题。 6. ...
`display`属性可以设置元素的显示方式，如`block`、`inline`或`flex`。`position`属性用于定位元素，有`static`、`relative`、`absolute`和`fixed`等选项。 **4. 盒阴影和边框** `box-shadow` 添加盒子阴影效果，`...
使用 display: inline-block 属性可以使 DIV 元素变成行内块元素，从而实现水平居中。 二、margin: 0 auto 使用 margin: 0 auto 属性可以使 DIV 元素水平居中。 三、position: absolute 使用 position: absolute...
2. **居中对齐**：Firefox可以通过设置`margin-left`和`margin-right`为`auto`使`div`水平居中，但IE可能需要将`text-align`设置为`center`，或者对`div`设置`margin: auto`。 3. **填充（Padding）与尺寸**：Fire...
display: inline-block; vertical-align: middle; } ``` 6. **使用calc()计算宽度** 如果子元素宽度未知，但父元素宽度确定，可以使用`calc()`计算宽度来实现居中。 ```css .child { margin-left: calc(50% - ...
display:inline-block 可以使用text-align:center和display:inline-block相结合，这个技巧需要一个父元素。 HTML代码: 复制代码代码如下: <div class=”navbar”> <ul> <li><a>Home</a></li> … </ul> </div> CSS...
例如，可以结合使用display:table-cell和display:inline-block的方法，或者使用CSS的Flexbox布局技术，后者提供了更为灵活和强大的布局控制，包括垂直和水平居中。 总结一下，通过display:table-cell实现div垂直...
- `document.getElementById(a + "_mo_" + i).style.display = "block";`：显示当前激活的标签页对应的内容。 - `document.getElementById(a + "_to_" + i).className = "no";`：设置当前激活的标签页的样式类为 `...