伊のspace～芳香精油＊美容保養＊程式設計

當我們寫文章夾雜圖片時，一般都是像這樣，圖片會高過文字很多：

文字與圖片對齊方式

但有時會希望文字與圖片是在同一條水平線上，如下：（應該稱為垂直置中對齊嗎？）

文字與圖片對齊方式

以下是各種對齊方式的呈現效果，括弧內是CSS語法，文章底下有程式碼解說：（注意文字與圖片的對齊方式）

垂直置中對齊（vertical-align:middle）

垂直置中對齊

對齊基線（vertical-align:baseline）

對齊基線

對齊頂部（vertical-align:top）

對齊頂部

對齊底部（vertical-align:bottom）

對齊底部

上標（vertical-align:super）
(圖片太大看不出效果，我把圖片縮小為15x15)

上標

下標（vertical-align:sub）
(圖片太大看不出效果，我把圖片縮小為15x15)

下標

對齊文字頂部（vertical-align:text-top）

對齊文字頂部

對齊文字底部（vertical-align:text-bottom）

對齊文字底部

有兩種寫法：

1. 用span將img包起來，實測Chrome可呈現、Safari無法呈現
<span style="vertical-align:middle"><img src="#"></span>

2. 直接將css style寫在img裡面，實測Chrome及Safari都可呈現
<img style="vertical-align:middle;" src="#">