IE8/FireFox下容器水平垂直布局问题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /><title></title></head><body><div style="width:400px;height:400px;margin:0px auto;"><!--@注释1--><div style="width:400px;height:400px;background-color:Blue;display:table-cell;vertical-align:bottom;"><!--将div设置为display:table-cell就可以通过vertical-align来设置内部元素的垂直布局,因为设置为display:table-cell的元素margin将失效要让其水平居中就要在外层再加上个非display:table-cell的元素来设置margin来让其水平居中(如:@注释1)-->看!连文字也垂直居下了<table style="width:100px;height:100px;background-color:Yellow;margin:0px 0px 0px auto;"><!--通过margin来设置table在div的水平布局，现在margin:0px 0px 0px auto;表示水平居右,margin中auto表示本容器的外边距为本容器到父级容器的距离宽度--><tr><td style="vertical-align:bottom;font-size:8px;"><!--td本来就是table-cell元素，因此可以通过vertical-align来设置内部元素的垂直布局-->看!连文字也垂直居下了<div style="width:25px;height:25px;background-color:Green;margin:0px 0px 0px auto;"></div><!--通过margin来设置div在table(td)的水平布局，现在margin:0px 0px 0px auto;表示水平居右,margin中auto表示本容器的外边距为本容器到父级容器的距离宽度--></td></tr></table></div></div></body></html>可能的值
| 值 | 描述 |
|---|---|
|
设置针对边距的属性。 值可以是：
默认值：未定义。 |
例子
四个边距均为10px：
h1 {margin: 10px}
顶边距和底边距为10px，左边距和右边距是父元素宽度的2%：
h1 {margin: 10px 2%}
顶边距为10px，左边距和右边距是父元素宽度的2%，底边距是-10px：
h1 {margin: 10px 2% -10px}
顶边距为10px，右边距是父元素宽度的2%，底边距是-10px，而左边距由浏览器设置：
h1 {margin: 10px 2% -10px auto}
浙公网安备 33010602011771号