一般來說看到Text-align就會認爲是使用在Text文字對齊當中，那如果使用在圖片img上可以作用嗎？

我設定的2個box，第一個愛心圖片有順利置中，而第二個哭哭臉還是靠著左邊。

<iframe height="300" style="width: 100%;" scrolling="no" title="圖片使用text-align方式" src="https://codepen.io/Rita-Yang/embed/GRwyveg?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Rita-Yang/pen/GRwyveg">
圖片使用text-align方式</a> by Rita Yang (<a href="https://codepen.io/Rita-Yang">@Rita-Yang</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

**p段落為 block元素
div為 block元素
a連結為 inline
img圖片為 inline-block**

依上述的程式碼
==text-align：center可直接作用於p及div==（第1個box裡的文字及包著愛心圖片的div）這2個均為區塊元素，簡單來說就是整行都是他家的，他想置中就可以置中。

而a和img（見第2個box）為行內元素，必須跟人排排站，擠成這樣怎麼置中嘛～
這時候只能使用margin推開大家了！**使用margin:0 auto可以將旁邊有位置的img推移至中間**，因為img不僅是inline還有block特性（從他可以設定寬高就知道了）

但可以發現a連結仍不動如山，沒辦法，誰叫他就是很喜歡跟人排排站的行內元素呢？就只有**將a他包在div裡**（見第1個box），讓他在自由地在裡面移動囉！