[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. 设置悬停的左/右背景