调整html界面笔记整理 不断更新

一、img+文字 在一个div 里面如何居中对齐？
img和文本是两种不同的节点 所以用的方法也不一样
文字主要依靠 父节点的行高来居中
而img需要的是自身的垂直中齐属性
div {line-heiht：25px;height:25px;}
div img {vertical-align:middle;}
例如：
<div id="buttons">
     <img src="ZR04.gif" alt="登录" />
     <img src="ZR05.gif" alt="注册" />
     <a href="#">忘记密码</a>
</div>
这时只要我们给图片加上垂直对齐的属性，后面的文字连接会相应的与图片水平对齐，即： img{     vertical-align:middle;}。当垂直对齐属性为“top”的时候，文字链与图片顶部水平对齐，一次类推。
如果是input与文字链放在一起，在ff和ie7、ie8中文字链都与图片顶部水平对齐，但是在ie6中却是底部对齐，同样我们可以给input添加垂直对齐属性来达到各个浏览器显示效果相同的目的。
 
二、在 IE8 FireFox Chrome CSS 置中解決方法
在 IE8 還沒出來之前，都是利用 margin: 0 auto; 的方式來解決 div 置中的問題，但是這在 IE8 並沒有發揮作用，無效了，底下在網路上發現兩種解法，分享給大家知道：
1. Width:100%
在最外層 div 加入 Width:100% 的屬性，程式碼如下：
#container {width:100%;}
#centered {width:400px; margin:0 auto;}
2. Text-Align:Center
在 div tag 裡面加入 Text-Align:Center，這樣 IE8 會偵測到此語法，就會服從 margin:0 auto; 之屬性，不過這樣內容會被全部至中，如果您有需要將其 div 內容往左邊對齊，那就必須在加上語法 Text-Align:left，底下是範例程式碼：
#container {text-align:center;}
#centered {width:400px; margin:0 auto;text-align:left;}
IE6，IE7 則是利用下面語法：
#wrap {
  margin: 0px auto; /* firefox */
  *margin: 0px auto; /* ie7 */
  _margin: 0px auto; /* ie6 */
  height:100px;