Design VS. F2E

1.垂直對齊

垂直對齊對表格 (table) 是最簡單的，但是 div 對每個人都有自己一套的 Css 寫法，整理出市面上常用的寫法。

1. table-cell ( ie11以上 )

   .tablecell{display:table-cell;vertical-align: middle;}
   .tablecell div{margin:0 auto;line-height: 50px;}

2. transform: translateY(-50%) ( ie11以上 ) 

   .transform div{
     position: relative;
     top:50%;
     -webkit-transform: translateY(-50%);
          -o-transform: translateY(-50%);
             transform: translateY(-50%);
     margin:0 auto;
     }

    

3. position: absolute  絕對定位

   .position{position: relative;}
   .position div{
     position: absolute;
     top:0;
     right:0;
     bottom:0;
     left:0;
     margin:auto;
   }

    

4. display:flex (IE11)

   .flexbox{
     display:flex;
     align-items:center;
     justify-content:center;
   }

    

5. line-height 

   .lineheight{line-height:150px;}
   .lineheight div{display:inline-block;}

    

2.div 100% 高 ( height )

html, 
body {
    height: 100%;
}
.wrap {
    height: 100%;
}

3.不同文件檔案有不同的 ICON

icon 高度 會以文字尺寸高度為準，也可以用 background-size 去設定尺寸

a{padding-right: 40px;}
/*連結寫法*/
a[href^="http://"]{
    background: url(https://cdn3.iconfinder.com/data/icons/networking-flat-colorful/614/4328_-_World_Wide_Web-32.png) no-repeat center right;
  background-size:18px 18px;
}
/* email */
a[href^="mailto:"]{
    background: url(https://cdn3.iconfinder.com/data/icons/fatcow/32/email_add.png) no-repeat center right;
}
/* 檔案類型 */
a[href$=".pdf"]{
    background: url(https://cdn3.iconfinder.com/data/icons/document-icons-2/30/647716-pdf-32.png) no-repeat center right;
}

4.漸層用法

線性漸層（Linear Gradient）與徑向漸層（Radial Gradients）的語法規則

線性漸層語法：background: linear-gradient(方向,顏色1,顏色2, ......);
徑向漸層語法：background: radial-gradient(ellipse 或 circle,顏色1,顏色2, ......);

5.表格內容斷行

有時候不喜歡表格裡面文字會自動斷行，當資料多的時候可以直接變成捲軸，所以需要加上不斷行語法

td {
    white-space: nowrap;
}