講到置中的方法，行內元素的不外乎就是用text-align:center，塊狀元素用justify-content:center
於是乎就這樣寫了…
<span style=”text-align: center;”>是誰住在深海的大鳳梨裡？</span>
然後一定沒反應…說好的置中呢
明明<p><h1>這些用text-align: center就會置中，<span>就不行了咧?!
這就要說到在html中<span>是屬於行內元素inline，<p><h1>這些是塊狀元素block，很多人都會以為他跟<p><h1>是block，搞懂這一點就知道該怎麼辦了吧XD
解法1：加block (推薦使用)
<span style=”text-align: center; display:block;”>是誰住在深海的大鳳梨裡？</span>
解法2：寫在父層
<div style=”text-align: center;”>
<span>是誰住在深海的大鳳梨裡？</span>
</div>
解法3：用flex
<span style=”display:flex; justify-content: center;”>是誰住在深海的大鳳梨裡？</span>
建議使用解法1一行簡單搞定，解法2要多一個父層要注意裡面如果還包了其他標籤也會受影響，遇到容器內有各種不同的對齊會比較麻煩，解法3也是屬於改變display的形態去達到效果的方式~
原始碼位置：codepen
