對不齊的 img span - PG出來面對系列

list 項目清單 時常見到

        <ul>

            <li>

                <img src='/images/Jst/Status/online.png'><span>線上</span></li>

            <li>

                <img src='/images/Jst/Status/busy.png'><span>忙碌</span></li>

            <li>

                <img src='/images/Jst/Status/leave.png'><span>離開</span></li>

        </ul>

但是有時候想自訂項目的圖示 於是放入 img 然後就悲劇了





解決方案異常簡單 只要給 img 設定 一行 css 即可

vertical-align: middle;