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

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

文字與圖片對齊方式

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

文字與圖片對齊方式

table
{
position:relative; 
margin-left:auto; 
margin-right:auto; 
width:auto;
}

很簡單吧~^^~
position 跟 width 的值請自行替換，
margin 左跟右用 auto 是為了讓它置中，
想要不對稱的話，把 width 拿掉再調左右就好。

本篇文章重新編排，請觀看 更好閱讀 及 理解 的新版：文字圖片對齊同一水平線(垂直置中vertical-align:middle)

程式碼：

<div>文字與圖片對齊方式<span style="vertical-align:middle;"><img src="#"></span></div>

<div>文字與圖片對齊方式<span style="vertical-align:baseline"><img src="#"></span></div>

<div>文字與圖片對齊方式<img src="#"></div>

<div>文字與圖片對齊方式<span style="vertical-align:bottom"><img src="#"></span></div>

<div>文字與圖片對齊方式<span style="vertical-align:sub"><img src="#"></span></div>

<div>文字與圖片對齊方式<span style="vertical-align:super"><img src="#"></span></div>

<div>文字與圖片對齊方式<span style="vertical-align:text-bottom"><img src="#"></span></div>

<div>文字與圖片對齊方式<span style="vertical-align:text-top"><img src="#"></span></div>

<div>文字與圖片對齊方式<span style="vertical-align:top"><img src="#"></span></div>

相當於html的  <td nowrap="true">

CSS的nowarp屬性  white-space: nowrap;

HTML DOM 中文說明網頁：
https://www.w3school.com.cn/js/js_htmldom.asp
簡體網站，內容蠻多的，有參考價值，對於英文感冒的人應該很好用。

HTML DOM 英文說明網頁：
https://www.w3schools.com/js/js_htmldom.asp