div+css布局入门教程(div+css页面布局代码)

第三，固定多行文本的中心高度

在本文的开始，我们已经说过CSS中的vertical-align属性将只对具有valign特性的(X)HTML标签起作用，但是CSS中还有一个display属性可以模拟table。

所以我们可以用这个属性让div模拟表格，使用垂直对齐。注意display:table和display:table-cell的用法，前者必须设置在父元素上，

后者必须在子元素上设置，因此我们需要为要定位的文本添加另一个div元素：

downcc.com提供的代码片段():

div#wrap {

height:400px;

display:table;

}

div#content {

vertical-align:middle;

display:table-cell;

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

}

downcc.com提供的代码片段():

!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=utf-8'/

style type='text/css'

body { font-size:12px;font-family:tahoma;}

div#wrap {

height:400px;

display:table;

}

div#content {

vertical-align:middle;

display:table-cell;

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

}

/style

/head

body

div id='wrap'

Div id='content'pre现在我们要将文本垂直居中！

div#wrap {

height:400px;

display:table;

}

div#content {

vertical-align:middle;

display:table-cell;

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

}

/pre/div

/div

/body

/html

这种方法应该是比较理想的，可惜Internet Explorer 6无法正确理解display:table和display:table-cell。

因此，此方法在Internet Explorer 6及以下版本中无效。嗯，真郁闷！但是还有其他方法。

第四，Internet Explorer中的解决方案

在Internet Explorer 6及以下版本中，高度的计算存在缺陷。在Internet Explorer 6中定位父元素后，如果再次计算子元素的百分比，

计算的依据似乎是继承的(如果定位值是绝对值，就没有这个问题，但是使用百分比计算的依据将不再是元素的高度，而是从父元素继承的定位高度)。例如，我们有以下(X)HTML代码片段：

downcc.com提供的代码片段():

div id='wrap'

div id='subwrap'

div id='content'

/div

/div

/div

如果我们对子工作区进行绝对定位，那么内容将继承这个属性。虽然不会立即显示在页面上，但是如果我们对内容进行相对定位，

你使用的100%分数将不再是内容的原始高度。例如，我们将子包装的位置设置为40%，如果我们希望内容的上边缘与包装重合，则必须将顶部设置为：-80%；所以，

如果我们将子工作区的顶部设置为50%，我们必须使用100%来将内容恢复到原始位置，但是如果我们也将内容设置为50%会怎么样呢？然后就是垂直居中。

所以我们可以用这个方法在Internet Explorer 6中实现垂直居中：

downcc.com提供的代码片段():

div#wrap {

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

height:400px;

position:relative;

}

div#subwrap {

position:absolute;

border:1px solid #000;

top:50%;

}

div#content {

border:1px solid #000;

position:relative;

top:-50%;

}

当然，这段代码只会在Internet Exlporer 6等有计算问题的浏览器中有用。(但是我不明白。我查阅了很多文章，不知道是因为同源还是什么原因。