[TOC] # 對齊方式 > 1. 頂線 > 2. 中線 > 3. 基線 > 4. 底線  ## 案例1：對齊圖片和文字  ``` <img src="" style="vertical-align: middle;"> ``` ## 案例2：對齊文本區域標記  ``` <textarea style="vertical-align: top;"></textarea> ``` ## 案例3：單行文本居中  > 如果因為容器寬度造成多行文本，可以設置overflow ## 案例4：已知父子容器大小，容器垂直居中  > 水平居中可以使用margin: -height/2 auto ## 案例5：已知父容器，未知子容器  ## 案例6：調整插入圖標大小  ## 案例7：滑動門效果  微信滑動門：[鏈接](http://data.pzhuweb.cn/weixin.html) ``` background-image: linear-gradient(#454545, #181818); /*導航欄線性漸變色*/ ``` > 1. 設置ul>li行內塊元素，行高等于容器高度 > 2. 設置li>a 行內塊元素，行高33px，左內邊距15px > 3. 設置a>span行內塊元素，行高33px，右內邊距15px > 4. 設置懸停的左/右背景