CSS 圖片水平置中

CSS vertical-align 常用參數表

語法	說明
vertical-align:baseline;	預設值，元素在該行的基礎線上，大約在文字的中間位置，並不美觀。
vertical-align:sub;	圖片垂直對齊該行本文的下標位置。
vertical-align:super;	圖片垂直對齊該行本文的上標位置。
vertical-align:top;	圖片垂直對齊該行元素的最高位置。
vertical-align:text-top;	圖片垂直對齊該行文字的最高位置。
vertical-align:middle;	圖片垂直對齊該行文字的置中位置。
vertical-align:bottom;	圖片垂直對齊該行元素的最低位置。
vertical-align:text-bottom;	圖片垂直對齊該行文字的最低位置。
vertical-align:%;	以百分比來讓圖片垂直對齊該行文字，可以有負值。

CSS vertical-align 屬性範例

<style type="text/css">
#TestImg1{
    vertical-align:text-top;
}
#TestImg2{
    vertical-align:middle;
}
#TestImg3{
    vertical-align:text-bottom;
}
#SeperationLine{
    height:1px;
    border-top:1px #ccc dashed;
    margin:10px 0px;
}
</style>
這張圖未使用 vertical-align 屬性<img id="TestImg0" src="圖片網址">這張圖未使用 vertical-align 屬性
<div id="SeperationLine"></div>
這張圖 vertical-align 設為 text-top<img id="TestImg1" src="圖片網址">這張圖 vertical-align 設為 text-top
<div id="SeperationLine"></div>
這張圖 vertical-align 設為 middle<img id="TestImg2" src="圖片網址">這張圖 vertical-align 設為 middle
<div id="SeperationLine"></div>
這張圖 vertical-align 設為 bottom<img id="TestImg3" src="圖片網址">這張圖 vertical-align 設為 bottom

範例輸出效果

這張圖未使用 vertical-align 屬性這張圖未使用 vertical-align 屬性

這張圖 vertical-align 設為 text-top這張圖 vertical-align 設為 text-top

這張圖 vertical-align 設為 middle這張圖 vertical-align 設為 middle

這張圖 vertical-align 設為 bottom這張圖 vertical-align 設為 bottom

參考來源wibibij網頁設計教學百科

css除去圖片連結的藍框

只要在CSS中加入

img {border: 0px }

即可

[CSS] 定義 a:link / a:visited / a:hover / a:active 的順序

在網站超連結效果使用上常常用到 a:link / a:visited / a:hover / a:active 這幾個css屬性

但是在使用上必須注意到的是這些屬性是有順序的

使用上的順序如下:

        /* 未連結 */
        a:link
        {
            color: #000000;
        }
        /* 已連結過 */
        a:visited
        {
            color: #FF0000;
        }
        /* 滑鼠移至連結 */
        a:hover
        {
            color: #00FF00;
        }
        /* 選擇的連結 */
        a:active
        {
            color: #0000FF;
        }

a:hover 需放置在 a:link 跟 a:visited 之後，則 a:active 放置在 a:hover 之後。

出處：.Net 蛤什麼?

單圖片按鈕與兩張圖片按鈕切換實例

第一種方式利用兩張圖做切換

HTML代碼：

<a id="theLink"></a>

CSS代碼：
#theLink{
display:block;/*因為標簽a是內鏈元素，所以利用這句話將內鏈元素轉化成塊狀元素，后面的width和height才起作用*/
width:120px;
height:41px;
margin:0 auto;
background:url(../images/normal.gif) no-repeat;
}
#theLink:hover{background:url(../images/press.gif) no-repeat;}

第二種方式利用一張圖有有個圖樣時，調整圖的位置將HTML代碼：
<a id="buttonBlock"></a>

CSS代碼：
#theLink{
display:block;
width:120px;
height:41px;
margin:0 auto;
background:url(../images/buttonBG.gif) no-repeat;
}#theLink:hover{ background:url(../images/buttonBG.gif) no-repeat 0 -41px;} 

如何將按鈕(Button)變成圖片按鈕

正常按鈕的Html語法會是這樣寫：

          <form  id="form1"  name="form1"  method="post"  action="" >

               <input  type="submit"  name="submit_Btn"  id="submit_Btn"  value="送出"  />
               <input  type="reset"  name="reset_Btn"  id="reset_Btn"  value="取消"  />

          </form>

若是要把正常的按鈕換成圖片按鈕來顯示，可以將寫法改為：

          <form  id="form1"  name="form1"  method="post"  action="" >  

               送出按鈕： <input  type="image"  name="submit_Btn"  id="submit_Btn"  img  src="XXX.jpg"  onClick="document.form1.submit()" >
               取消按鈕： <input  type="image"  name="reset_Btn"  id="reset_Btn"  img  src="XXX.jpg"  onClick="document.form1.reset()" >

          </form>

或是：

          <form  id="form1"  name="form1"  method="post"  action="" >  

               送出按鈕： <button  type="button"  name="submit_Btn"  id="submit_Btn" onClick="document.form1.submit()"><img  src="XXX.jpg"></button>

               取消按鈕： <button  type="button"  name="reset_Btn"  id="reset_Btn" onClick="document.form1.reset()"><img  src="XXX.jpg"></button>

          </form>

也可以這樣：

          <form  id="form1"  name="form1"  method="post"  action="" >  

               送出按鈕： <a href="javascript:document.form1.submit()"><img  src="XXX.jpg"></a>

               取消按鈕： <a href="javascript:document.form1.reset()"><img  src="XXX.jpg"></a>

          </form>

或是利用CSS：

          <form  id="form1"  name="form1"  method="post"  action="" >  

               送出按鈕： <input  type="button"  name="submit_Btn"  id="submit_Btn" onClick="document.form1.submit()" style="background-image:url(XXX.jpg);width:30px;height:30px;">

               取消按鈕： <input  type="button"  name="reset_Btn"  id="reset_Btn" onClick="document.form1.reset()" style="background-image:url(XXX.jpg);width:30px;height:30px;">

          </form>

出處：果凍 的 程式備忘簿